From 843fde3b1304ee0bcc7b0fedc7684d0a625d6b79 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 29 Aug 2024 18:16:21 +0200
Subject: [PATCH] [Editor] Make the focused stamp annotation more clear from a
 screen reader point of view (bug 1911994)

It has been tested with Voice Over (mac) and with NVDA (windows).

When an added stamp annotation is focused, the screen reader will announce
that it's a figure containing a graphic with the added alt-text.
---
 src/display/editor/alt_text.js | 3 +--
 src/display/editor/editor.js   | 9 +++++++++
 src/display/editor/stamp.js    | 5 ++++-
 src/display/editor/toolbar.js  | 4 ++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/display/editor/alt_text.js b/src/display/editor/alt_text.js
index 304c7fb649e54..da4049598d955 100644
--- 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
index 596374b782496..b9fb4374ba9d4 100644
--- 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
index e41aa2ac27975..c0ce61f28ade8 100644
--- 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
index 131c6c30699c5..ea60bf69df33e 100644
--- a/src/display/editor/toolbar.js
+++ b/src/display/editor/toolbar.js
@@ -62,6 +62,10 @@ class EditorToolbar {
     return editToolbar;
   }
 
+  get div() {
+    return this.#toolbar;
+  }
+
   static #pointerDown(e) {
     e.stopPropagation();
   }