[Editor] Add a button to trigger a dialog for adding an alt text (bug 1844952)

src/display/editor/editor.js

@@ -34,6 +34,8 @@ import { FeatureTest, shadow, unreachable } from "../../shared/util.js";
  * Base class for editors.
  */
 class AnnotationEditor {
+  #altTextButton = null;
+
   #keepAspectRatio = false;
 
   #resizersDiv = null;
@@ -54,6 +56,8 @@ class AnnotationEditor {
 
   _focusEventsAllowed = true;
 
+  _l10nPromise = null;
+
   #isDraggable = false;
 
   #zIndex = AnnotationEditor._zIndex++;
@@ -64,6 +68,10 @@ class AnnotationEditor {
 
   static _zIndex = 1;
 
+  // When one of the dimensions of an editor is smaller than this value, the
+  // button to edit the alt text is visually moved outside of the editor.
+  static SMALL_EDITOR_SIZE = 0;
+
   /**
    * @param {AnnotationEditorParameters} parameters
    */
@@ -124,9 +132,17 @@ class AnnotationEditor {
 
   /**
    * Initialize the l10n stuff for this type of editor.
-   * @param {Object} _l10n
+   * @param {Object} l10n
    */
-  static initialize(_l10n) {
+  static initialize(l10n, options = null) {
+    AnnotationEditor._l10nPromise ||= new Map(
+      ["alt_text_button_label"].map(str => [str, l10n.get(str)])
+    );
+    if (options?.strings) {
+      for (const str of options.strings) {
+        AnnotationEditor._l10nPromise.set(str, l10n.get(str));
+      }
+    }
     if (AnnotationEditor._borderLineWidth !== -1) {
       return;
     }
@@ -522,6 +538,11 @@ class AnnotationEditor {
     if (!this.#keepAspectRatio) {
       this.div.style.height = `${((100 * height) / parentHeight).toFixed(2)}%`;
     }
+    this.#altTextButton?.classList.toggle(
+      "small",
+      width < AnnotationEditor.SMALL_EDITOR_SIZE ||
+        height < AnnotationEditor.SMALL_EDITOR_SIZE
+    );
   }
 
   fixDims() {
@@ -785,6 +806,40 @@ class AnnotationEditor {
     this.fixAndSetPosition();
   }
 
+  addAltTextButton() {
+    if (this.#altTextButton) {
+      return;
+    }
+    const altText = (this.#altTextButton = document.createElement("span"));
+    altText.className = "altText";
+    AnnotationEditor._l10nPromise.get("alt_text_button_label").then(msg => {
+      altText.textContent = msg;
+    });
+    altText.tabIndex = "0";
+    altText.addEventListener(
+      "click",
+      event => {
+        event.preventDefault();
+      },
+      { capture: true }
+    );
+    altText.addEventListener("keydown", event => {
+      if (event.target === altText && event.key === "Enter") {
+        event.preventDefault();
+      }
+    });
+    this.div.append(altText);
+    if (!AnnotationEditor.SMALL_EDITOR_SIZE) {
+      // We take the width of the alt text button and we add 40% to it to be
+      // sure to have enough space for it.
+      const PERCENT = 40;
+      AnnotationEditor.SMALL_EDITOR_SIZE = Math.min(
+        128,
+        Math.round(altText.getBoundingClientRect().width * (1 + PERCENT / 100))
+      );
+    }
+  }
+
   /**
    * Render this editor in a div.
    * @returns {HTMLDivElement}
@@ -1144,13 +1199,21 @@ class AnnotationEditor {
    * When the user disables the editing mode some editors can change some of
    * their properties.
    */
-  disableEditing() {}
+  disableEditing() {
+    if (this.#altTextButton) {
+      this.#altTextButton.hidden = true;
+    }
+  }
 
   /**
    * When the user enables the editing mode some editors can change some of
    * their properties.
    */
-  enableEditing() {}
+  enableEditing() {
+    if (this.#altTextButton) {
+      this.#altTextButton.hidden = false;
+    }
+  }
 
   /**
    * The editor is about to be edited.

src/display/editor/freetext.js

@@ -56,8 +56,6 @@ class FreeTextEditor extends AnnotationEditor {
 
   static _freeTextDefaultContent = "";
 
-  static _l10nPromise;
-
   static _internalPadding = 0;
 
   static _defaultColor = null;
@@ -145,13 +143,9 @@ class FreeTextEditor extends AnnotationEditor {
 
   /** @inheritdoc */
   static initialize(l10n) {
-    super.initialize(l10n);
-    this._l10nPromise = new Map(
-      ["free_text2_default_content", "editor_free_text2_aria_label"].map(
-        str => [str, l10n.get(str)]
-      )
-    );
-
+    AnnotationEditor.initialize(l10n, {
+      strings: ["free_text2_default_content", "editor_free_text2_aria_label"],
+    });
     const style = getComputedStyle(document.documentElement);
 
     if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
@@ -548,11 +542,11 @@ class FreeTextEditor extends AnnotationEditor {
     this.editorDiv.setAttribute("id", this.#editorDivId);
     this.enableEditing();
 
-    FreeTextEditor._l10nPromise
+    AnnotationEditor._l10nPromise
       .get("editor_free_text2_aria_label")
       .then(msg => this.editorDiv?.setAttribute("aria-label", msg));
 
-    FreeTextEditor._l10nPromise
+    AnnotationEditor._l10nPromise
       .get("free_text2_default_content")
       .then(msg => this.editorDiv?.setAttribute("default-content", msg));
     this.editorDiv.contentEditable = true;

src/display/editor/ink.js

@@ -62,8 +62,6 @@ class InkEditor extends AnnotationEditor {
 
   static _defaultThickness = 1;
 
-  static _l10nPromise;
-
   static _type = "ink";
 
   constructor(params) {
@@ -84,13 +82,9 @@ class InkEditor extends AnnotationEditor {
 
   /** @inheritdoc */
   static initialize(l10n) {
-    super.initialize(l10n);
-    this._l10nPromise = new Map(
-      ["editor_ink_canvas_aria_label", "editor_ink2_aria_label"].map(str => [
-        str,
-        l10n.get(str),
-      ])
-    );
+    AnnotationEditor.initialize(l10n, {
+      strings: ["editor_ink_canvas_aria_label", "editor_ink2_aria_label"],
+    });
   }
 
   /** @inheritdoc */
@@ -743,7 +737,7 @@ class InkEditor extends AnnotationEditor {
     this.canvas.width = this.canvas.height = 0;
     this.canvas.className = "inkEditorCanvas";
 
-    InkEditor._l10nPromise
+    AnnotationEditor._l10nPromise
       .get("editor_ink_canvas_aria_label")
       .then(msg => this.canvas?.setAttribute("aria-label", msg));
     this.div.append(this.canvas);
@@ -782,7 +776,7 @@ class InkEditor extends AnnotationEditor {
 
     super.render();
 
-    InkEditor._l10nPromise
+    AnnotationEditor._l10nPromise
       .get("editor_ink2_aria_label")
       .then(msg => this.div?.setAttribute("aria-label", msg));
 

src/display/editor/stamp.js

@@ -50,6 +50,11 @@ class StampEditor extends AnnotationEditor {
     this.#bitmapFile = params.bitmapFile;
   }
 
+  /** @inheritdoc */
+  static initialize(l10n) {
+    AnnotationEditor.initialize(l10n);
+  }
+
   static get supportedTypes() {
     // See https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
     // to know which types are supported by the browser.
@@ -306,6 +311,7 @@ class StampEditor extends AnnotationEditor {
       this.parent.addUndoableEditor(this);
       this.#hasBeenAddedInUndoStack = true;
     }
+    this.addAltTextButton();
   }
 
   /**

src/display/editor/tools.js

@@ -741,6 +741,14 @@ class AnnotationEditorUIManager {
     );
   }
 
+  get direction() {
+    return shadow(
+      this,
+      "direction",
+      getComputedStyle(this.#container).direction
+    );
+  }
+
   onPageChanging({ pageNumber }) {
     this.#currentPageIndex = pageNumber - 1;
   }