Merge pull request #20678 from calixteman/bug2016136

Add an aria-label to the checkboxes in the thumbnails view (bug 2016136)

Author: calixteman

l10n/en-US/viewer.ftl

@@ -200,6 +200,11 @@ pdfjs-thumb-page-title =
 pdfjs-thumb-page-canvas =
     .aria-label = Thumbnail of Page { $page }
 
+# Variables:
+#   $page (Number) - the page number
+pdfjs-thumb-page-checkbox =
+    .aria-label = Select page { $page }
+
 ## Find panel button title and messages
 
 pdfjs-find-input =

test/integration/thumbnail_view_spec.mjs

@@ -1,8 +1,10 @@
 import {
   awaitPromise,
   closePages,
+  FSI,
   kbFocusNext,
   loadAndWait,
+  PDI,
 } from "./test_utils.mjs";
 
 function waitForThumbnailVisible(page, pageNum) {
@@ -317,4 +319,40 @@ describe("PDF Thumbnail View", () => {
       );
     });
   });
+
+  describe("Checkbox accessibility", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        "#viewsManagerToggleButton",
+        null,
+        null,
+        { enableSplitMerge: true }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("should have accessible label on checkbox", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#viewsManagerToggleButton");
+
+          await waitForThumbnailVisible(page, 1);
+
+          const ariaLabel = await page.$eval(
+            `.thumbnail[page-number="1"] input[type="checkbox"]`,
+            el => el.getAttribute("aria-label")
+          );
+          expect(ariaLabel)
+            .withContext(`In ${browserName}`)
+            .toBe(`Select page ${FSI}1${PDI}`);
+        })
+      );
+    });
+  });
 });

web/pdf_thumbnail_view.js

@@ -125,6 +125,8 @@ class PDFThumbnailView extends RenderableView {
       const checkbox = (this.checkbox = document.createElement("input"));
       checkbox.type = "checkbox";
       checkbox.tabIndex = -1;
+      checkbox.setAttribute("data-l10n-id", "pdfjs-thumb-page-checkbox");
+      checkbox.setAttribute("data-l10n-args", this.#pageL10nArgs);
       imageContainer.append(checkbox);
     }
 
@@ -464,6 +466,7 @@ class PDFThumbnailView extends RenderableView {
   setPageLabel(label) {
     this.pageLabel = typeof label === "string" ? label : null;
     this.image.setAttribute("data-l10n-args", this.#pageL10nArgs);
+    this.checkbox?.setAttribute("data-l10n-args", this.#pageL10nArgs);
   }
 }