[Editor] Improve a11y for newly added element (#15109)

- In the annotationEditorLayer, reorder the editors in the DOM according
  the position of the elements on the screen;
- add an aria-owns attribute on the "nearest" element in the text layer
  which points to the added editor.

test/integration/freetext_editor_spec.js

@@ -197,5 +197,59 @@ describe("Editor", () => {
         })
       );
     });
+
+    it("must check that aria-owns is correct", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          const [adobeComRect, oldAriaOwns] = await page.$eval(
+            ".textLayer",
+            el => {
+              for (const span of el.querySelectorAll(
+                `span[role="presentation"]`
+              )) {
+                if (span.innerText.includes("adobe.com")) {
+                  span.setAttribute("pdfjs", true);
+                  const { x, y, width, height } = span.getBoundingClientRect();
+                  return [
+                    { x, y, width, height },
+                    span.getAttribute("aria-owns"),
+                  ];
+                }
+              }
+              return null;
+            }
+          );
+
+          expect(oldAriaOwns).withContext(`In ${browserName}`).toEqual(null);
+
+          const data = "Hello PDF.js World !!";
+          await page.mouse.click(
+            adobeComRect.x + adobeComRect.width + 10,
+            adobeComRect.y + adobeComRect.height / 2
+          );
+          await page.type(`${editorPrefix}5 .internal`, data);
+
+          const editorRect = await page.$eval(`${editorPrefix}5`, el => {
+            const { x, y, width, height } = el.getBoundingClientRect();
+            return { x, y, width, height };
+          });
+
+          // Commit.
+          await page.mouse.click(
+            editorRect.x,
+            editorRect.y + 2 * editorRect.height
+          );
+
+          const ariaOwns = await page.$eval(".textLayer", el => {
+            const span = el.querySelector(`span[pdfjs="true"]`);
+            return span?.getAttribute("aria-owns") || null;
+          });
+
+          expect(ariaOwns)
+            .withContext(`In ${browserName}`)
+            .toEqual(`${editorPrefix}5-editor`.slice(1));
+        })
+      );
+    });
   });
 });

test/unit/display_utils_spec.js

@@ -14,6 +14,7 @@
  */
 
 import {
+  binarySearchFirstItem,
   DOMCanvasFactory,
   DOMSVGFactory,
   getFilenameFromUrl,
@@ -25,6 +26,39 @@ import { bytesToString } from "../../src/shared/util.js";
 import { isNodeJS } from "../../src/shared/is_node.js";
 
 describe("display_utils", function () {
+  describe("binary search", function () {
+    function isTrue(boolean) {
+      return boolean;
+    }
+    function isGreater3(number) {
+      return number > 3;
+    }
+
+    it("empty array", function () {
+      expect(binarySearchFirstItem([], isTrue)).toEqual(0);
+    });
+    it("single boolean entry", function () {
+      expect(binarySearchFirstItem([false], isTrue)).toEqual(1);
+      expect(binarySearchFirstItem([true], isTrue)).toEqual(0);
+    });
+    it("three boolean entries", function () {
+      expect(binarySearchFirstItem([true, true, true], isTrue)).toEqual(0);
+      expect(binarySearchFirstItem([false, true, true], isTrue)).toEqual(1);
+      expect(binarySearchFirstItem([false, false, true], isTrue)).toEqual(2);
+      expect(binarySearchFirstItem([false, false, false], isTrue)).toEqual(3);
+    });
+    it("three numeric entries", function () {
+      expect(binarySearchFirstItem([0, 1, 2], isGreater3)).toEqual(3);
+      expect(binarySearchFirstItem([2, 3, 4], isGreater3)).toEqual(2);
+      expect(binarySearchFirstItem([4, 5, 6], isGreater3)).toEqual(0);
+    });
+    it("three numeric entries and a start index", function () {
+      expect(binarySearchFirstItem([0, 1, 2, 3, 4], isGreater3, 2)).toEqual(4);
+      expect(binarySearchFirstItem([2, 3, 4], isGreater3, 2)).toEqual(2);
+      expect(binarySearchFirstItem([4, 5, 6], isGreater3, 1)).toEqual(1);
+    });
+  });
+
   describe("DOMCanvasFactory", function () {
     let canvasFactory;
 

test/unit/ui_utils_spec.js

@@ -15,7 +15,6 @@
 
 import {
   backtrackBeforeAllVisibleElements,
-  binarySearchFirstItem,
   getPageSizeInches,
   getVisibleElements,
   isPortraitOrientation,
@@ -25,39 +24,6 @@ import {
 } from "../../web/ui_utils.js";
 
 describe("ui_utils", function () {
-  describe("binary search", function () {
-    function isTrue(boolean) {
-      return boolean;
-    }
-    function isGreater3(number) {
-      return number > 3;
-    }
-
-    it("empty array", function () {
-      expect(binarySearchFirstItem([], isTrue)).toEqual(0);
-    });
-    it("single boolean entry", function () {
-      expect(binarySearchFirstItem([false], isTrue)).toEqual(1);
-      expect(binarySearchFirstItem([true], isTrue)).toEqual(0);
-    });
-    it("three boolean entries", function () {
-      expect(binarySearchFirstItem([true, true, true], isTrue)).toEqual(0);
-      expect(binarySearchFirstItem([false, true, true], isTrue)).toEqual(1);
-      expect(binarySearchFirstItem([false, false, true], isTrue)).toEqual(2);
-      expect(binarySearchFirstItem([false, false, false], isTrue)).toEqual(3);
-    });
-    it("three numeric entries", function () {
-      expect(binarySearchFirstItem([0, 1, 2], isGreater3)).toEqual(3);
-      expect(binarySearchFirstItem([2, 3, 4], isGreater3)).toEqual(2);
-      expect(binarySearchFirstItem([4, 5, 6], isGreater3)).toEqual(0);
-    });
-    it("three numeric entries and a start index", function () {
-      expect(binarySearchFirstItem([0, 1, 2, 3, 4], isGreater3, 2)).toEqual(4);
-      expect(binarySearchFirstItem([2, 3, 4], isGreater3, 2)).toEqual(2);
-      expect(binarySearchFirstItem([4, 5, 6], isGreater3, 1)).toEqual(1);
-    });
-  });
-
   describe("isValidRotation", function () {
     it("should reject non-integer angles", function () {
       expect(isValidRotation()).toEqual(false);