l10n/en-US/viewer.ftl

@@ -324,19 +324,6 @@ pdfjs-editor-signature-button =
     .title = Add signature
 pdfjs-editor-signature-button-label = Add signature
 
-## Default editor aria labels
-
-# “Highlight” is a noun, the string is used on the editor for highlights.
-pdfjs-editor-highlight-editor =
-    .aria-label = Highlight editor
-# “Drawing” is a noun, the string is used on the editor for drawings.
-pdfjs-editor-ink-editor =
-    .aria-label = Drawing editor
-pdfjs-editor-signature-editor =
-    .aria-label = Signature editor
-pdfjs-editor-stamp-editor =
-    .aria-label = Image editor
-
 ## Remove button for the various kind of editor.
 
 pdfjs-editor-remove-ink-button =
@@ -373,6 +360,10 @@ pdfjs-editor-signature-add-signature-button-label = Add new signature
 pdfjs-free-text2 =
     .aria-label = Text Editor
     .default-content = Start typing…
+pdfjs-ink =
+    .aria-label = Draw Editor
+pdfjs-ink-canvas =
+    .aria-label = User-created image
 
 ## Alt-text dialog
 

src/display/editor/alt_text.js

@@ -330,7 +330,7 @@ class AltText {
       button.append(tooltip);
     }
 
-    const element = this.#editor.getElementForAltText();
+    const element = this.#editor.getImageForAltText();
     element?.setAttribute("aria-describedby", tooltip.id);
   }
 }

src/display/editor/editor.js

@@ -1142,17 +1142,13 @@ class AnnotationEditor {
    * @returns {HTMLDivElement | null}
    */
   render() {
-    const div = (this.div = document.createElement("div"));
-    div.setAttribute("data-editor-rotation", (360 - this.rotation) % 360);
-    div.className = this.name;
-    div.setAttribute("id", this.id);
-    div.tabIndex = this.#disabled ? -1 : 0;
-    div.setAttribute("role", "application");
-    if (this.defaultL10nId) {
-      div.setAttribute("data-l10n-id", this.defaultL10nId);
-    }
+    this.div = document.createElement("div");
+    this.div.setAttribute("data-editor-rotation", (360 - this.rotation) % 360);
+    this.div.className = this.name;
+    this.div.setAttribute("id", this.id);
+    this.div.tabIndex = this.#disabled ? -1 : 0;
     if (!this._isVisible) {
-      div.classList.add("hidden");
+      this.div.classList.add("hidden");
     }
 
     this.setInForeground();
@@ -1160,22 +1156,23 @@ class AnnotationEditor {
 
     const [parentWidth, parentHeight] = this.parentDimensions;
     if (this.parentRotation % 180 !== 0) {
-      div.style.maxWidth = `${((100 * parentHeight) / parentWidth).toFixed(
-        2
-      )}%`;
-      div.style.maxHeight = `${((100 * parentWidth) / parentHeight).toFixed(
+      this.div.style.maxWidth = `${((100 * parentHeight) / parentWidth).toFixed(
         2
       )}%`;
+      this.div.style.maxHeight = `${(
+        (100 * parentWidth) /
+        parentHeight
+      ).toFixed(2)}%`;
     }
 
     const [tx, ty] = this.getInitialTranslation();
     this.translate(tx, ty);
 
-    bindEvents(this, div, ["keydown", "pointerdown"]);
+    bindEvents(this, this.div, ["pointerdown"]);
 
     if (this.isResizable && this._uiManager._supportsPinchToZoom) {
       this.#touchManager ||= new TouchManager({
-        container: div,
+        container: this.div,
         isPinchingDisabled: () => !this.isSelected,
         onPinchStart: this.#touchPinchStartCallback.bind(this),
         onPinching: this.#touchPinchCallback.bind(this),
@@ -1186,7 +1183,7 @@ class AnnotationEditor {
 
     this._uiManager._editorUndoBar?.hide();
 
-    return div;
+    return this.div;
   }
 
   #touchPinchStartCallback() {
@@ -1695,6 +1692,7 @@ class AnnotationEditor {
     if (this.isResizable) {
       this.#createResizers();
       this.#resizersDiv.classList.remove("hidden");
+      bindEvents(this, this.div, ["keydown"]);
     }
   }
 
@@ -1894,8 +1892,8 @@ class AnnotationEditor {
   /**
    * @returns {HTMLElement | null} the element requiring an alt text.
    */
-  getElementForAltText() {
-    return this.div;
+  getImageForAltText() {
+    return null;
   }
 
   /**

src/display/editor/highlight.js

@@ -111,7 +111,6 @@ class HighlightEditor extends AnnotationEditor {
     this.#methodOfCreation = params.methodOfCreation || "";
     this.#text = params.text || "";
     this._isDraggable = false;
-    this.defaultL10nId = "pdfjs-editor-highlight-editor";
 
     if (params.highlightId > -1) {
       this.#isFreeHighlight = true;

src/display/editor/ink.js

@@ -68,7 +68,6 @@ class InkEditor extends DrawingEditor {
   constructor(params) {
     super({ ...params, name: "inkEditor" });
     this._willKeepAspectRatio = true;
-    this.defaultL10nId = "pdfjs-editor-ink-editor";
   }
 
   /** @inheritdoc */

src/display/editor/signature.js

@@ -79,7 +79,6 @@ class SignatureEditor extends DrawingEditor {
     this._willKeepAspectRatio = true;
     this.#signatureData = params.signatureData || null;
     this.#description = null;
-    this.defaultL10nId = "pdfjs-editor-signature-editor";
   }
 
   /** @inheritdoc */
@@ -157,6 +156,7 @@ class SignatureEditor extends DrawingEditor {
     }
 
     super.render();
+    this.div.setAttribute("role", "figure");
 
     if (this._drawId === null) {
       if (this.#signatureData) {
@@ -259,7 +259,7 @@ class SignatureEditor extends DrawingEditor {
     const { outline } = (this.#signatureData = data);
     this.#isExtracted = outline instanceof ContourDrawOutline;
     this.#description = description;
-    this.div.setAttribute("aria-description", description);
+    this.div.setAttribute("aria-label", description);
     let drawingOptions;
     if (this.#isExtracted) {
       drawingOptions = SignatureEditor.getDefaultDrawingOptions();

src/display/editor/stamp.js

@@ -56,7 +56,6 @@ class StampEditor extends AnnotationEditor {
     super({ ...params, name: "stampEditor" });
     this.#bitmapUrl = params.bitmapUrl;
     this.#bitmapFile = params.bitmapFile;
-    this.defaultL10nId = "pdfjs-editor-stamp-editor";
   }
 
   /** @inheritdoc */
@@ -354,6 +353,7 @@ class StampEditor extends AnnotationEditor {
 
     super.render();
     this.div.hidden = true;
+    this.div.setAttribute("role", "figure");
 
     this.addAltTextButton();
 
@@ -474,7 +474,7 @@ class StampEditor extends AnnotationEditor {
       action: "inserted_image",
     });
     if (this.#bitmapFileName) {
-      this.div.setAttribute("aria-description", this.#bitmapFileName);
+      canvas.setAttribute("aria-label", this.#bitmapFileName);
     }
   }
 
@@ -686,6 +686,11 @@ class StampEditor extends AnnotationEditor {
     );
   }
 
+  /** @inheritdoc */
+  getImageForAltText() {
+    return this.#canvas;
+  }
+
   #serializeBitmap(toUrl) {
     if (toUrl) {
       if (this.#isSvg) {

test/integration/signature_editor_spec.mjs

@@ -184,7 +184,7 @@ describe("Signature Editor", () => {
 
           // Check the aria label.
           await page.waitForSelector(
-            `${editorSelector}[aria-description="Hello World"]`
+            `${editorSelector}[aria-label="Hello World"]`
           );
 
           // Edit the description.

test/integration/stamp_editor_spec.mjs

@@ -361,7 +361,9 @@ describe("Stamp Editor", () => {
         await page.click(saveButtonSelector);
 
         // Check that the canvas has an aria-describedby attribute.
-        await page.waitForSelector(`${editorSelector}[aria-describedby]`);
+        await page.waitForSelector(
+          `${editorSelector} canvas[aria-describedby]`
+        );
 
         // Wait for the alt-text button to have the correct icon.
         await page.waitForSelector(`${buttonSelector}.done`);