[Editor] Make sure the save checkbox isn't focusable when saving is d…

…isabled (bug 1952558) And fix the the width of the warning message when the limit of signatures has been reached: in french the string is longer than the dialog's one.
mozilla · Mar 10, 2025 · 69a2e51 · 69a2e51
1 parent 81baa16
commit 69a2e51
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/test/integration/signature_editor_spec.mjs b/test/integration/signature_editor_spec.mjs
@@ -85,7 +85,7 @@ describe("Signature Editor", () => {
           );
           await page.click("#addSignatureTypeInput");
           await page.waitForSelector(
-            "#addSignatureSaveContainer[disabled=true]"
+            "#addSignatureSaveContainer > input:disabled"
           );
           let description = await page.$eval(
             descriptionInputSelector,
@@ -99,7 +99,7 @@ describe("Signature Editor", () => {
 
           // The save button should be enabled now.
           await page.waitForSelector(
-            "#addSignatureSaveContainer:not([disabled])"
+            "#addSignatureSaveContainer > input:not(:disabled)"
           );
           await page.waitForSelector("#addSignatureSaveCheckbox[checked=true]");
 
@@ -126,7 +126,7 @@ describe("Signature Editor", () => {
           );
           // The save button should be disabled now.
           await page.waitForSelector(
-            "#addSignatureSaveContainer[disabled=true]"
+            "#addSignatureSaveContainer > input:disabled"
           );
           await page.waitForSelector(`${addButtonSelector}:disabled`);
 
@@ -249,7 +249,7 @@ describe("Signature Editor", () => {
 
           // The save button should be enabled now.
           await page.waitForSelector(
-            "#addSignatureSaveContainer:not([disabled])"
+            "#addSignatureSaveContainer > input:not(:disabled)"
           );
           await page.waitForSelector("#addSignatureSaveCheckbox[checked=true]");
 
@@ -305,7 +305,7 @@ describe("Signature Editor", () => {
 
           // The save button should be enabled now.
           await page.waitForSelector(
-            "#addSignatureSaveContainer:not([disabled])"
+            "#addSignatureSaveContainer > input:not(:disabled)"
           );
           await page.waitForSelector("#addSignatureSaveCheckbox[checked=true]");
 

diff --git a/web/signature_manager.css b/web/signature_manager.css
@@ -595,12 +595,16 @@
 
         #addSignatureSaveContainer {
           display: grid;
-          grid-template-columns: max-content max-content;
+          grid-template-columns: max-content auto;
           gap: 4px;
           width: 100%;
 
           > input {
             margin: 0;
+
+            &:disabled + label {
+              opacity: 0.4;
+            }
           }
 
           > label {
@@ -617,14 +621,6 @@
             color: var(--save-warning-color);
             font-size: 11px;
           }
-
-          &:is([disabled], .fullStorage) {
-            pointer-events: none;
-
-            > :not(#addSignatureSaveWarning) {
-              opacity: 0.4;
-            }
-          }
         }
       }
     }

diff --git a/web/signature_manager.js b/web/signature_manager.js
@@ -322,12 +322,10 @@ class SignatureManager {
   }
 
   #disableButtons(value) {
-    this.#clearButton.disabled = this.#addButton.disabled = !value;
-    if (value) {
-      this.#saveContainer.removeAttribute("disabled");
-    } else {
-      this.#saveContainer.setAttribute("disabled", true);
-    }
+    this.#saveCheckbox.disabled =
+      this.#clearButton.disabled =
+      this.#addButton.disabled =
+        !value;
   }
 
   #initTypeTab(reset) {

diff --git a/web/viewer.html b/web/viewer.html
@@ -727,7 +727,7 @@
                   <input id="addSignatureFilePicker" type="file"></input>
                 </div>
               </div>
-              <div id="addSignatureControls" disabled>
+              <div id="addSignatureControls">
                 <div id="horizontalContainer">
                   <div id="addSignatureDescriptionContainer">
                     <label for="addSignatureDescription" data-l10n-id="pdfjs-editor-add-signature-description-label">Description (alt text)</span></label>
@@ -739,7 +739,7 @@
                   <button id="clearSignatureButton" type="button" data-l10n-id="pdfjs-editor-add-signature-clear-button" tabindex="0"><span data-l10n-id="pdfjs-editor-add-signature-clear-button-label">Clear signature</span></button>
                 </div>
                 <div id="addSignatureSaveContainer">
-                  <input type="checkbox" id="addSignatureSaveCheckbox" checked="true" tabindex="0"></input>
+                  <input type="checkbox" id="addSignatureSaveCheckbox" checked="true"></input>
                   <label for="addSignatureSaveCheckbox" data-l10n-id="pdfjs-editor-add-signature-save-checkbox">Save signature</label>
                   <span></span>
                   <span id="addSignatureSaveWarning" data-l10n-id="pdfjs-editor-add-signature-save-warning-message">You’ve reached the limit of 5 saved signatures. Remove one to save more.</span>