[Editor] Set an aria-description for an added signature (bug 1956513)

NVDA behaves differently depending if the user is hovering or focusing an added signature.
An aria-description is read in both cases while an aria-label is not.

l10n/en-US/viewer.ftl

@@ -332,8 +332,13 @@ pdfjs-editor-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
+
+# Used when a signature editor is selected/hovered.
+# Variables:
+#   $description (String) - a string describing/labeling the signature.
+pdfjs-editor-signature-editor1 =
+    .aria-description = Signature editor: { $description }
+
 pdfjs-editor-stamp-editor =
     .aria-label = Image editor
 

src/display/editor/signature.js

@@ -79,7 +79,7 @@ class SignatureEditor extends DrawingEditor {
     this._willKeepAspectRatio = true;
     this.#signatureData = params.signatureData || null;
     this.#description = null;
-    this.defaultL10nId = "pdfjs-editor-signature-editor";
+    this.defaultL10nId = "pdfjs-editor-signature-editor1";
   }
 
   /** @inheritdoc */
@@ -158,6 +158,13 @@ class SignatureEditor extends DrawingEditor {
 
     super.render();
 
+    if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+      // TODO: remove this check once
+      //  https://github.com/projectfluent/fluent.js/pull/640
+      // is merged and released.
+      this.div.setAttribute("data-l10n-attrs", "aria-description");
+    }
+
     if (this._drawId === null) {
       if (this.#signatureData) {
         const {
@@ -183,6 +190,12 @@ class SignatureEditor extends DrawingEditor {
         });
         this.addSignature(outline, heightInPage, description, uuid);
       } else {
+        // Avoid Firefox crashing (with a local build) because the description
+        // parameter is missing.
+        this.div.setAttribute(
+          "data-l10n-args",
+          JSON.stringify({ description: "" })
+        );
         this.div.hidden = true;
         this._uiManager.getSignature(this);
       }
@@ -259,7 +272,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("data-l10n-args", JSON.stringify({ description }));
     let drawingOptions;
     if (this.#isExtracted) {
       drawingOptions = SignatureEditor.getDefaultDrawingOptions();

test/integration/signature_editor_spec.mjs

@@ -184,9 +184,9 @@ describe("Signature Editor", () => {
             `.altText.editDescription[title="Hello World"]`
           );
 
-          // Check the aria label.
+          // Check the aria description.
           await page.waitForSelector(
-            `${editorSelector}[aria-description="Hello World"]`
+            `${editorSelector}[aria-description="Signature editor: \u2068Hello World\u2069"]`
           );
 
           // Edit the description.