Merge pull request #21151 from calixteman/bug2034568

Fix clicking on a thumbnail image not navigating to the correct page when using a screen reader (bug 2034568)

Author: calixteman

test/integration/thumbnail_view_spec.mjs

@@ -210,6 +210,30 @@ describe("PDF Thumbnail View", () => {
         })
       );
     });
+
+    it("must navigate when a synthetic click is dispatched on the thumbnail image (bug 2034568)", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await showViewsManager(page);
+          await waitForThumbnailVisible(page, 3);
+
+          // Simulate a screen reader (e.g. NVDA) firing a synthetic click on
+          // the <img> child rather than the thumbnailImageContainer button.
+          await page.evaluate(() => {
+            const img = document.querySelector(
+              `.thumbnail[page-number="3"] .thumbnailImageContainer img`
+            );
+            img.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+          });
+
+          const currentPage = await page.$eval(
+            "#pageNumber",
+            el => el.valueAsNumber
+          );
+          expect(currentPage).withContext(`In ${browserName}`).toBe(3);
+        })
+      );
+    });
   });
 
   describe("The manage dropdown menu", () => {

web/pdf_thumbnail_viewer.js

@@ -1547,12 +1547,9 @@ class PDFThumbnailViewer {
   }
 
   #goToPage(e) {
-    const { target } = e;
-    if (target.classList.contains("thumbnailImageContainer")) {
-      const pageNumber = parseInt(
-        target.parentElement.getAttribute("page-number"),
-        10
-      );
+    const container = e.target.closest(".thumbnailImageContainer");
+    if (container) {
+      const pageNumber = parseInt(container.getAttribute("page-number"), 10);
       this.linkService.goToPage(pageNumber);
       stopEvent(e);
     }