[Editor] Make the text layer focusable before the editors (bug 1881746)

Keep the different layers in a constant order to avoid the use of a z-index
and a tab-index.

src/display/editor/annotation_editor_layer.js

@@ -237,6 +237,7 @@ class AnnotationEditorLayer {
    * editor creation.
    */
   enable() {
+    this.div.tabIndex = 0;
     this.togglePointerEvents(true);
     const annotationElementIds = new Set();
     for (const editor of this.#editors.values()) {
@@ -274,6 +275,7 @@ class AnnotationEditorLayer {
    */
   disable() {
     this.#isDisabling = true;
+    this.div.tabIndex = -1;
     this.togglePointerEvents(false);
     const hiddenAnnotationIds = new Set();
     for (const editor of this.#editors.values()) {
@@ -333,6 +335,7 @@ class AnnotationEditorLayer {
   }
 
   enableTextSelection() {
+    this.div.tabIndex = -1;
     if (this.#textLayer?.div && !this.#boundTextLayerPointerDown) {
       this.#boundTextLayerPointerDown = this.#textLayerPointerDown.bind(this);
       this.#textLayer.div.addEventListener(
@@ -344,6 +347,7 @@ class AnnotationEditorLayer {
   }
 
   disableTextSelection() {
+    this.div.tabIndex = 0;
     if (this.#textLayer?.div && this.#boundTextLayerPointerDown) {
       this.#textLayer.div.removeEventListener(
         "pointerdown",

src/display/editor/editor.js

@@ -44,6 +44,8 @@ class AnnotationEditor {
 
   #altText = null;
 
+  #disabled = false;
+
   #keepAspectRatio = false;
 
   #resizersDiv = null;
@@ -1002,7 +1004,7 @@ class AnnotationEditor {
     this.div.setAttribute("data-editor-rotation", (360 - this.rotation) % 360);
     this.div.className = this.name;
     this.div.setAttribute("id", this.id);
-    this.div.setAttribute("tabIndex", 0);
+    this.div.tabIndex = this.#disabled ? -1 : 0;
     if (!this._isVisible) {
       this.div.classList.add("hidden");
     }
@@ -1680,6 +1682,20 @@ class AnnotationEditor {
     this.div.classList.toggle("hidden", !visible);
     this._isVisible = visible;
   }
+
+  enable() {
+    if (this.div) {
+      this.div.tabIndex = 0;
+    }
+    this.#disabled = false;
+  }
+
+  disable() {
+    if (this.div) {
+      this.div.tabIndex = -1;
+    }
+    this.#disabled = true;
+  }
 }
 
 // This class is used to fake an editor which has been deleted.

src/display/editor/tools.js

@@ -1596,6 +1596,9 @@ class AnnotationEditorUIManager {
       for (const layer of this.#allLayers.values()) {
         layer.enable();
       }
+      for (const editor of this.#allEditors.values()) {
+        editor.enable();
+      }
     }
   }
 
@@ -1609,6 +1612,9 @@ class AnnotationEditorUIManager {
       for (const layer of this.#allLayers.values()) {
         layer.disable();
       }
+      for (const editor of this.#allEditors.values()) {
+        editor.disable();
+      }
     }
   }
 

test/integration/freetext_editor_spec.mjs

@@ -39,6 +39,7 @@ import {
   kbUndo,
   loadAndWait,
   scrollIntoView,
+  waitForAnnotationEditorLayer,
   waitForEvent,
   waitForSelectedEditor,
   waitForSerialized,
@@ -945,9 +946,12 @@ describe("FreeText Editor", () => {
               `${getEditorSelector(currentId)} .overlay.enabled`
             );
 
+            const promise = await waitForAnnotationEditorLayer(page);
             await page.evaluate(() => {
               document.getElementById("pageRotateCw").click();
             });
+            await awaitPromise(promise);
+
             currentId += 1;
             await page.waitForSelector(
               ".page[data-page-number='1'] .canvasWrapper",

test/integration/highlight_editor_spec.mjs

@@ -22,6 +22,8 @@ import {
   getSerialized,
   kbBigMoveLeft,
   kbBigMoveUp,
+  kbFocusNext,
+  kbFocusPrevious,
   kbSelectAll,
   loadAndWait,
   scrollIntoView,
@@ -1556,4 +1558,52 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Text layer must have the focus before highlights", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check the focus order", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+
+          let rect = await getSpanRectFromText(page, 1, "Abstract");
+          let x = rect.x + rect.width / 2;
+          let y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2, delay: 100 });
+          await page.waitForSelector(getEditorSelector(0));
+
+          rect = await getSpanRectFromText(page, 1, "Languages");
+          x = rect.x + rect.width / 2;
+          y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2, delay: 100 });
+          await page.waitForSelector(getEditorSelector(1));
+          await page.focus(getEditorSelector(1));
+
+          await kbFocusPrevious(page);
+          await page.waitForFunction(
+            sel => document.querySelector(sel) === document.activeElement,
+            {},
+            `.page[data-page-number="1"] > .textLayer`
+          );
+
+          await kbFocusNext(page);
+          await page.waitForFunction(
+            sel => document.querySelector(sel) === document.activeElement,
+            {},
+            getEditorSelector(1)
+          );
+        })
+      );
+    });
+  });
 });

test/integration/test_utils.mjs

@@ -461,6 +461,24 @@ async function kbDeleteLastWord(page) {
   }
 }
 
+async function kbFocusNext(page) {
+  const handle = await createPromise(page, resolve => {
+    window.addEventListener("focusin", resolve, { once: true });
+  });
+  await page.keyboard.press("Tab");
+  await awaitPromise(handle);
+}
+
+async function kbFocusPrevious(page) {
+  const handle = await createPromise(page, resolve => {
+    window.addEventListener("focusin", resolve, { once: true });
+  });
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("Tab");
+  await page.keyboard.up("Shift");
+  await awaitPromise(handle);
+}
+
 export {
   awaitPromise,
   clearInput,
@@ -484,6 +502,8 @@ export {
   kbBigMoveUp,
   kbCopy,
   kbDeleteLastWord,
+  kbFocusNext,
+  kbFocusPrevious,
   kbGoToBegin,
   kbGoToEnd,
   kbModifierDown,

web/annotation_editor_layer_builder.css

@@ -109,7 +109,6 @@
   font-size: calc(100px * var(--scale-factor));
   transform-origin: 0 0;
   cursor: auto;
-  z-index: 4;
 }
 
 .annotationEditorLayer.waiting {

web/annotation_editor_layer_builder.js

@@ -30,20 +30,22 @@ import { GenericL10n } from "web-null_l10n";
 /**
  * @typedef {Object} AnnotationEditorLayerBuilderOptions
  * @property {AnnotationEditorUIManager} [uiManager]
- * @property {HTMLDivElement} pageDiv
  * @property {PDFPageProxy} pdfPage
  * @property {IL10n} [l10n]
  * @property {TextAccessibilityManager} [accessibilityManager]
  * @property {AnnotationLayer} [annotationLayer]
  * @property {TextLayer} [textLayer]
  * @property {DrawLayer} [drawLayer]
+ * @property {function} [onAppend]
  */
 
 class AnnotationEditorLayerBuilder {
   #annotationLayer = null;
 
   #drawLayer = null;
 
+  #onAppend = null;
+
   #textLayer = null;
 
   #uiManager;
@@ -52,7 +54,6 @@ class AnnotationEditorLayerBuilder {
    * @param {AnnotationEditorLayerBuilderOptions} options
    */
   constructor(options) {
-    this.pageDiv = options.pageDiv;
     this.pdfPage = options.pdfPage;
     this.accessibilityManager = options.accessibilityManager;
     this.l10n = options.l10n;
@@ -66,6 +67,7 @@ class AnnotationEditorLayerBuilder {
     this.#annotationLayer = options.annotationLayer || null;
     this.#textLayer = options.textLayer || null;
     this.#drawLayer = options.drawLayer || null;
+    this.#onAppend = options.onAppend || null;
   }
 
   /**
@@ -91,10 +93,9 @@ class AnnotationEditorLayerBuilder {
     // Create an AnnotationEditor layer div
     const div = (this.div = document.createElement("div"));
     div.className = "annotationEditorLayer";
-    div.tabIndex = 0;
     div.hidden = true;
     div.dir = this.#uiManager.direction;
-    this.pageDiv.append(div);
+    this.#onAppend?.(div);
 
     this.annotationEditorLayer = new AnnotationEditorLayer({
       uiManager: this.#uiManager,

web/annotation_layer_builder.css

@@ -76,7 +76,6 @@
   left: 0;
   pointer-events: none;
   transform-origin: 0 0;
-  z-index: 3;
 
   &[data-main-rotation="90"] .norotate {
     transform: rotate(270deg) translateX(-100%);

web/annotation_layer_builder.js

@@ -28,7 +28,6 @@ import { PresentationModeState } from "./ui_utils.js";
 
 /**
  * @typedef {Object} AnnotationLayerBuilderOptions
- * @property {HTMLDivElement} pageDiv
  * @property {PDFPageProxy} pdfPage
  * @property {AnnotationStorage} [annotationStorage]
  * @property {string} [imageResourcesPath] - Path for image resources, mainly
@@ -42,16 +41,18 @@ import { PresentationModeState } from "./ui_utils.js";
  *   [fieldObjectsPromise]
  * @property {Map<string, HTMLCanvasElement>} [annotationCanvasMap]
  * @property {TextAccessibilityManager} [accessibilityManager]
+ * @property {function} [onAppend]
  */
 
 class AnnotationLayerBuilder {
+  #onAppend = null;
+
   #onPresentationModeChanged = null;
 
   /**
    * @param {AnnotationLayerBuilderOptions} options
    */
   constructor({
-    pageDiv,
     pdfPage,
     linkService,
     downloadManager,
@@ -63,8 +64,8 @@ class AnnotationLayerBuilder {
     fieldObjectsPromise = null,
     annotationCanvasMap = null,
     accessibilityManager = null,
+    onAppend = null,
   }) {
-    this.pageDiv = pageDiv;
     this.pdfPage = pdfPage;
     this.linkService = linkService;
     this.downloadManager = downloadManager;
@@ -76,6 +77,7 @@ class AnnotationLayerBuilder {
     this._fieldObjectsPromise = fieldObjectsPromise || Promise.resolve(null);
     this._annotationCanvasMap = annotationCanvasMap;
     this._accessibilityManager = accessibilityManager;
+    this.#onAppend = onAppend;
 
     this.annotationLayer = null;
     this.div = null;
@@ -115,7 +117,7 @@ class AnnotationLayerBuilder {
     // if there is at least one annotation.
     const div = (this.div = document.createElement("div"));
     div.className = "annotationLayer";
-    this.pageDiv.append(div);
+    this.#onAppend?.(div);
 
     if (annotations.length === 0) {
       this.hide();