Merge pull request #19636 from calixteman/bug1952558

[Editor] Make sure the save checkbox isn't focusable when saving is disabled (bug 1952558)
mozilla · Mar 10, 2025 · febf59c · febf59c
2 parents 13474ac + 69a2e51
commit febf59c
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>