[Editor] Add a title to the comment buttons (bug 1990813)

Author: calixteman

l10n/en-US/viewer.ftl

@@ -673,6 +673,9 @@ pdfjs-editor-edit-signature-update-button = Update
 
 ## Comment popup
 
+pdfjs-show-comment-button =
+    .title = Show comment
+
 pdfjs-editor-edit-comment-popup-button-label = Edit comment
 pdfjs-editor-edit-comment-popup-button =
     .title = Edit comment

src/display/annotation_layer.js

@@ -2486,6 +2486,7 @@ class PopupElement {
     button.tabIndex = 0;
     button.ariaHasPopup = "dialog";
     button.ariaControls = "commentPopup";
+    button.setAttribute("data-l10n-id", "pdfjs-show-comment-button");
 
     const { signal } = (this.#popupAbortController = new AbortController());
     button.addEventListener("keydown", this.#boundKeyDown, { signal });

src/display/editor/comment.js

@@ -143,6 +143,7 @@ class Comment {
 
     if (isStandalone) {
       comment.ariaControls = "commentPopup";
+      comment.setAttribute("data-l10n-id", "pdfjs-show-comment-button");
     } else {
       comment.ariaControlsElements = [
         this.#editor._uiManager.getCommentDialogElement(),

test/integration/comment_spec.mjs

@@ -238,6 +238,69 @@ describe("Comment", () => {
     });
   });
 
+  describe("Comment buttons", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        ".annotationEditorLayer",
+        "page-width",
+        null,
+        { enableComment: true }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the comment button has a title", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+
+          const rect = await getSpanRectFromText(page, 1, "Languages");
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2, delay: 100 });
+          await page.waitForSelector(getEditorSelector(0));
+
+          let commentButtonSelector = `${getEditorSelector(0)} button.comment`;
+          await page.waitForSelector(commentButtonSelector, { visible: true });
+          let title = await page.evaluate(
+            selector => document.querySelector(selector).title,
+            commentButtonSelector
+          );
+          expect(title)
+            .withContext(`In ${browserName}`)
+            .toEqual("Edit comment");
+          await page.click(commentButtonSelector);
+
+          const textInputSelector = "#commentManagerTextInput";
+          await page.waitForSelector(textInputSelector, {
+            visible: true,
+          });
+          await page.type(textInputSelector, "Hello world!");
+
+          await page.click("#commentManagerSaveButton");
+
+          commentButtonSelector = `${getEditorSelector(0)} button.annotationCommentButton`;
+          await page.waitForSelector(commentButtonSelector, {
+            visible: true,
+          });
+          title = await page.evaluate(selector => {
+            const button = document.querySelector(selector);
+            return button.title;
+          }, commentButtonSelector);
+          expect(title)
+            .withContext(`In ${browserName}`)
+            .toEqual("Show comment");
+        })
+      );
+    });
+  });
+
   describe("Comment sidebar", () => {
     let pages;