[Editor] Improve the accessibility of the highlight editor (bug 1881743)

src/display/draw_layer.js

@@ -66,6 +66,7 @@ class DrawLayer {
   #createSVG(box) {
     const svg = DrawLayer._svgFactory.create(1, 1, /* skipDimensions = */ true);
     this.#parent.append(svg);
+    svg.setAttribute("aria-hidden", true);
     DrawLayer.#setBox(svg, box);
 
     return svg;

src/display/editor/color_picker.js

@@ -93,6 +93,7 @@ class ColorPicker {
     button.addEventListener("keydown", this.#boundKeyDown);
     const swatch = (this.#buttonSwatch = document.createElement("span"));
     swatch.className = "swatch";
+    swatch.setAttribute("aria-hidden", true);
     swatch.style.backgroundColor = this.#defaultColor;
     button.append(swatch);
     return button;

src/display/editor/highlight.js

@@ -61,6 +61,8 @@ class HighlightEditor extends AnnotationEditor {
 
   #outlineId = null;
 
+  #text = "";
+
   #thickness;
 
   #methodOfCreation = "";
@@ -104,6 +106,7 @@ class HighlightEditor extends AnnotationEditor {
     this.#opacity = params.opacity || HighlightEditor._defaultOpacity;
     this.#boxes = params.boxes || null;
     this.#methodOfCreation = params.methodOfCreation || "";
+    this.#text = params.text || "";
     this._isDraggable = false;
 
     if (params.highlightId > -1) {
@@ -558,6 +561,13 @@ 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";
+    }
     if (this.#isFreeHighlight) {
       div.classList.add("free");
     } else {
@@ -565,6 +575,7 @@ class HighlightEditor extends AnnotationEditor {
     }
     const highlightDiv = (this.#highlightDiv = document.createElement("div"));
     div.append(highlightDiv);
+    highlightDiv.setAttribute("aria-hidden", "true");
     highlightDiv.className = "internal";
     highlightDiv.style.clipPath = this.#clipPathId;
     const [parentWidth, parentHeight] = this.parentDimensions;

src/display/editor/toolbar.js

@@ -31,6 +31,7 @@ class EditorToolbar {
   render() {
     const editToolbar = (this.#toolbar = document.createElement("div"));
     editToolbar.className = "editToolbar";
+    editToolbar.setAttribute("role", "toolbar");
     editToolbar.addEventListener("contextmenu", noContextMenu);
     editToolbar.addEventListener("pointerdown", EditorToolbar.#pointerDown);
 

src/display/editor/tools.js

@@ -952,6 +952,7 @@ class AnnotationEditorUIManager {
       return;
     }
     const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+    const text = selection.toString();
     const anchorElement =
       anchorNode.nodeType === Node.TEXT_NODE
         ? anchorNode.parentElement
@@ -974,6 +975,7 @@ class AnnotationEditorUIManager {
           anchorOffset,
           focusNode,
           focusOffset,
+          text,
         });
         break;
       }

web/annotation_editor_layer_builder.css

@@ -48,6 +48,19 @@
     pointer;
 }
 
+/* The following class is used to hide an element but keep it available to
+ * for screen readers. */
+.visuallyHidden {
+  position: absolute;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .textLayer.highlighting {
   cursor: var(--editorFreeHighlight-editing-cursor);