Add some aria-labels to the paste button in order to know where the buttons are (bug 2020758)

Author: calixteman

l10n/en-US/viewer.ftl

@@ -767,4 +767,9 @@ pdfjs-views-manager-status-undo-button-label = Undo
 pdfjs-views-manager-status-close-button =
     .title = Close
 pdfjs-views-manager-status-close-button-label = Close
-pdfjs-views-manager-paste-button-label = Paste
+
+# Variables:
+#   $page (Number) - the page number after which the paste button is.
+pdfjs-views-manager-paste-button-after-label = Paste after page { $page }
+
+pdfjs-views-manager-paste-button-before-label = Paste before the first page

test/integration/reorganize_pages_spec.mjs

@@ -20,13 +20,15 @@ import {
   createPromise,
   createPromiseWithArgs,
   dragAndDrop,
+  FSI,
   getAnnotationSelector,
   getRect,
   getThumbnailSelector,
   kbCopy,
   kbCut,
   kbDelete,
   loadAndWait,
+  PDI,
   scrollIntoView,
   showViewsManager,
   waitAndClick,
@@ -792,6 +794,42 @@ describe("Reorganize Pages View", () => {
       await closePages(pages);
     });
 
+    it("should check that the paste button spans have the right l10n id depending on their position", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await waitForThumbnailVisible(page, 1);
+          await page.waitForSelector("#viewsManagerStatusActionButton", {
+            visible: true,
+          });
+          await waitAndClick(
+            page,
+            `.thumbnail:has(${getThumbnailSelector(1)}) input`
+          );
+
+          const handlePagesEdited = await waitForPagesEdited(page);
+          await waitAndClick(page, "#viewsManagerStatusActionButton");
+          await waitAndClick(page, "#viewsManagerStatusActionCopy");
+          await awaitPromise(handlePagesEdited);
+
+          const prevSpanText = await page.$eval(
+            `button.thumbnailPasteButton:has(+ ${getThumbnailSelector(1)}) > span`,
+            el => el.textContent.trim()
+          );
+          expect(prevSpanText)
+            .withContext(`In ${browserName}`)
+            .toBe("Paste before the first page");
+
+          const afterSpanText = await page.$eval(
+            `${getThumbnailSelector(1)} + button.thumbnailPasteButton > span`,
+            el => el.textContent.trim()
+          );
+          expect(afterSpanText)
+            .withContext(`In ${browserName}`)
+            .toBe(`Paste after page ${FSI}1${PDI}`);
+        })
+      );
+    });
+
     it("should check that a page can be copied and pasted before the first thumbnail", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {

web/pdf_thumbnail_view.js

@@ -183,14 +183,28 @@ class PDFThumbnailView extends RenderableView {
     pasteButton.classList.add("thumbnailPasteButton", "viewsManagerButton");
     pasteButton.tabIndex = 0;
     const span = document.createElement("span");
-    span.setAttribute("data-l10n-id", "pdfjs-views-manager-paste-button-label");
+    span.setAttribute(
+      "data-l10n-id",
+      "pdfjs-views-manager-paste-button-after-label"
+    );
+    span.setAttribute(
+      "data-l10n-args",
+      JSON.stringify({
+        page: this.pageLabel ?? this.id,
+      })
+    );
     pasteButton.append(span);
     pasteButton.addEventListener("click", () => {
       pasteCallback(this.id);
     });
     if (this.id === 1) {
       const prevPasteButton = (this.prevPasteButton =
         pasteButton.cloneNode(true));
+      const prevSpan = prevPasteButton.firstElementChild;
+      prevSpan.setAttribute(
+        "data-l10n-id",
+        "pdfjs-views-manager-paste-button-before-label"
+      );
       prevPasteButton.addEventListener("click", () => {
         pasteCallback(0);
       });