Merge pull request mozilla#17885 from calixteman/bug1889623

[Editor] Remove the mark from the highlight element and set its role to mark (bug 1889623)
timvandermeij · Apr 4, 2024 · a5308e1 · a5308e1
2 parents 25f6a0c + 54110de
commit a5308e1
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 46 deletions.
diff --git a/src/display/editor/highlight.js b/src/display/editor/highlight.js
@@ -562,11 +562,8 @@ class HighlightEditor extends AnnotationEditor {
 
     const div = super.render();
     if (this.#text) {
-      const mark = document.createElement("mark");
-      div.append(mark);
-      mark.append(document.createTextNode(this.#text));
-      // The text is invisible but it's still visible by a screen reader.
-      mark.className = "visuallyHidden";
+      div.setAttribute("aria-label", this.#text);
+      div.setAttribute("role", "mark");
     }
     if (this.#isFreeHighlight) {
       div.classList.add("free");

diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
@@ -1608,47 +1608,6 @@ describe("Highlight Editor", () => {
     });
   });
 
-  describe("Text inside mark element", () => {
-    let pages;
-
-    beforeAll(async () => {
-      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
-    });
-
-    afterAll(async () => {
-      await closePages(pages);
-    });
-
-    it("must have null dimensions", async () => {
-      await Promise.all(
-        pages.map(async ([browserName, page]) => {
-          await page.click("#editorHighlight");
-          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
-
-          const rect = await getSpanRectFromText(page, 1, "Abstract");
-          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 [w, h] = await page.evaluate(
-            sel => {
-              const mark = document.querySelector(sel);
-              const range = document.createRange();
-              range.selectNodeContents(mark);
-              const { width, height } = range.getClientRects()[0];
-              return [width, height];
-            },
-            `${getEditorSelector(0)} mark`
-          );
-
-          expect(w).withContext(`In ${browserName}`).toEqual(0);
-          expect(h).withContext(`In ${browserName}`).toEqual(0);
-        })
-      );
-    });
-  });
-
   describe("Undo a highlight", () => {
     let pages;