[Editor] Move the focus to the comment button once editing is done (bug 1990820)

Author: calixteman

src/display/editor/comment.js

@@ -71,6 +71,12 @@ class Comment {
     return this.#render(button, true);
   }
 
+  focusButton() {
+    setTimeout(() => {
+      (this.#commentStandaloneButton ?? this.#commentToolbarButton)?.focus();
+    }, 0);
+  }
+
   onUpdatedColor() {
     if (!this.#commentStandaloneButton) {
       return;

src/display/editor/editor.js

@@ -1162,6 +1162,10 @@ class AnnotationEditor {
     return this.#altText?.hasData() ?? false;
   }
 
+  focusCommentButton() {
+    this.#comment?.focusButton();
+  }
+
   addCommentButton() {
     return (this.#comment ||= new Comment(this));
   }

test/integration/comment_spec.mjs

@@ -14,7 +14,9 @@
  */
 
 import {
+  awaitPromise,
   closePages,
+  createPromise,
   dragAndDrop,
   getEditorSelector,
   getRect,
@@ -301,6 +303,71 @@ describe("Comment", () => {
     });
   });
 
+  describe("Focused element after editing", () => {
+    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 focus is moved on the comment button", 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));
+
+          const commentButtonSelector = `${getEditorSelector(0)} button.comment`;
+          await waitAndClick(page, commentButtonSelector);
+
+          await page.waitForSelector("#commentManagerCancelButton", {
+            visible: true,
+          });
+          const handle = await createPromise(page, resolve => {
+            document
+              .querySelector("button.comment")
+              .addEventListener("focus", resolve, { once: true });
+          });
+          await page.click("#commentManagerCancelButton");
+          await awaitPromise(handle);
+
+          await waitAndClick(page, commentButtonSelector);
+
+          const textInputSelector = "#commentManagerTextInput";
+          await page.waitForSelector(textInputSelector, {
+            visible: true,
+          });
+          await page.type(textInputSelector, "Hello world!");
+
+          await page.click("#commentManagerSaveButton");
+          await page.waitForSelector("button.annotationCommentButton", {
+            visible: true,
+          });
+
+          await page.waitForFunction(
+            sel => document.activeElement === document.querySelector(sel),
+            {},
+            "button.annotationCommentButton"
+          );
+        })
+      );
+    });
+  });
+
   describe("Comment sidebar", () => {
     let pages;
 

web/comment_manager.js

@@ -851,16 +851,18 @@ class CommentDialog {
   }
 
   #finish() {
+    this.#editor?.focusCommentButton();
+    this.#editor = null;
     this.#textInput.value = this.#previousText = this.#commentText = "";
     this.#overlayManager.closeIfActive(this.#dialog);
     this.#textInput.style.height = "";
     this.#uiManager?.addEditListeners();
     this.#uiManager = null;
-    this.#editor = null;
   }
 
   destroy() {
     this.#uiManager = null;
+    this.#editor = null;
     this.#finish();
   }
 }