Merge pull request #18664 from calixteman/bug1911994

[Editor] Make the focused stamp annotation more clear from a screen reader point of view (bug 1911994)
mozilla · Sep 3, 2024 · 5d8d9ef · 5d8d9ef
2 parents 0676ea1 + 843fde3
commit 5d8d9ef
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/src/display/editor/alt_text.js b/src/display/editor/alt_text.js
@@ -279,8 +279,7 @@ class AltText {
       this.#altTextTooltip = tooltip = document.createElement("span");
       tooltip.className = "tooltip";
       tooltip.setAttribute("role", "tooltip");
-      const id = (tooltip.id = `alt-text-tooltip-${this.#editor.id}`);
-      button.setAttribute("aria-describedby", id);
+      tooltip.id = `alt-text-tooltip-${this.#editor.id}`;
 
       const DELAY_TO_SHOW_TOOLTIP = 100;
       const signal = this.#editor._uiManager._signal;

diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
@@ -993,6 +993,15 @@ class AnnotationEditor {
     this.#altText?.destroy();
   }
 
+  addContainer(container) {
+    const editToolbarDiv = this._editToolbar?.div;
+    if (editToolbarDiv) {
+      editToolbarDiv.before(container);
+    } else {
+      this.div.append(container);
+    }
+  }
+
   getClientDimensions() {
     return this.div.getBoundingClientRect();
   }

diff --git a/src/display/editor/stamp.js b/src/display/editor/stamp.js
@@ -373,6 +373,7 @@ class StampEditor extends AnnotationEditor {
 
     super.render();
     this.div.hidden = true;
+    this.div.setAttribute("role", "figure");
 
     this.addAltTextButton();
 
@@ -425,7 +426,9 @@ class StampEditor extends AnnotationEditor {
 
     this._uiManager.enableWaiting(false);
     const canvas = (this.#canvas = document.createElement("canvas"));
-    div.append(canvas);
+    canvas.setAttribute("role", "img");
+    this.addContainer(canvas);
+
     if (
       !this._uiManager.useNewAltTextWhenAddingImage ||
       !this._uiManager.useNewAltTextFlow

diff --git a/src/display/editor/toolbar.js b/src/display/editor/toolbar.js
@@ -71,6 +71,10 @@ class EditorToolbar {
     return editToolbar;
   }
 
+  get div() {
+    return this.#toolbar;
+  }
+
   static #pointerDown(e) {
     e.stopPropagation();
   }