From f676c2c0c8fa53e74ef2d8174802b519a30067ae Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Mon, 11 Mar 2024 14:05:28 +0100
Subject: [PATCH] [Editor] Improve the accessibility of the highlight editor
 (bug 1881743)

---
 src/display/draw_layer.js               |  1 +
 src/display/editor/color_picker.js      |  1 +
 src/display/editor/highlight.js         | 11 +++++++++++
 src/display/editor/toolbar.js           |  1 +
 src/display/editor/tools.js             |  2 ++
 web/annotation_editor_layer_builder.css | 13 +++++++++++++
 6 files changed, 29 insertions(+)

diff --git a/src/display/draw_layer.js b/src/display/draw_layer.js
index c7cf6ef9f..c5beb3589 100644
--- a/src/display/draw_layer.js
+++ b/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;
diff --git a/src/display/editor/color_picker.js b/src/display/editor/color_picker.js
index 2ca94dbbd..ab69299c7 100644
--- a/src/display/editor/color_picker.js
+++ b/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;
diff --git a/src/display/editor/highlight.js b/src/display/editor/highlight.js
index 836748911..8b819427f 100644
--- a/src/display/editor/highlight.js
+++ b/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;
diff --git a/src/display/editor/toolbar.js b/src/display/editor/toolbar.js
index 31552f47f..135af4bc7 100644
--- a/src/display/editor/toolbar.js
+++ b/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);
 
diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js
index 4fb59d0fd..81ccd16e9 100644
--- a/src/display/editor/tools.js
+++ b/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;
       }
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 636c8ae8e..733af85d7 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/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);