diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl index ee2f85e9885cc..f7c79287339f1 100644 --- a/l10n/en-US/viewer.ftl +++ b/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 = diff --git a/test/integration/thumbnail_view_spec.mjs b/test/integration/thumbnail_view_spec.mjs index 5b35956f6be58..f44dd58081beb 100644 --- a/test/integration/thumbnail_view_spec.mjs +++ b/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}`); + }) + ); + }); + }); }); diff --git a/web/pdf_thumbnail_view.js b/web/pdf_thumbnail_view.js index 706febbbedfa3..61430667be8a0 100644 --- a/web/pdf_thumbnail_view.js +++ b/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); } }