[Editor] Add a label to the highight floating button readable with NV…

…DA (bug 1886964)
mozilla · Mar 23, 2024 · 63c1c78 · 63c1c78
1 parent e7203f5
commit 63c1c78
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
@@ -318,8 +318,10 @@ pdfjs-editor-stamp-button-label = Add or edit images
 pdfjs-editor-highlight-button =
     .title = Highlight
 pdfjs-editor-highlight-button-label = Highlight
-pdfjs-highlight-floating-button =
+pdfjs-highlight-floating-button1 =
     .title = Highlight
+    .aria-label = Highlight
+pdfjs-highlight-floating-button-label = Highlight
 
 ## Remove button for the various kind of editor.
 

diff --git a/src/display/editor/toolbar.js b/src/display/editor/toolbar.js
@@ -202,7 +202,11 @@ class HighlightToolbar {
     const button = document.createElement("button");
     button.className = "highlightButton";
     button.tabIndex = 0;
-    button.setAttribute("data-l10n-id", `pdfjs-highlight-floating-button`);
+    button.setAttribute("data-l10n-id", `pdfjs-highlight-floating-button1`);
+    const span = document.createElement("span");
+    button.append(span);
+    span.className = "visuallyHidden";
+    span.setAttribute("data-l10n-id", "pdfjs-highlight-floating-button-label");
     button.addEventListener("contextmenu", noContextMenu);
     button.addEventListener("click", () => {
       this.#uiManager.highlightSelection("floating_button");

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -52,6 +52,8 @@
  * for screen readers. */
 .visuallyHidden {
   position: absolute;
+  top: 0;
+  left: 0;
   border: 0;
   margin: 0;
   padding: 0;