Merge pull request #20910 from calixteman/bug2024156

Fix the outline of the deselect button in the sidebar (bug 2024156)

Author: calixteman

web/viewer.html

@@ -191,7 +191,7 @@
                         <span id="viewsManagerStatusActionLabelContainer" class="viewsManagerStatusLabel">
                           <button
                             id="viewsManagerStatusActionDeselectButton"
-                            class="hiddden"
+                            class="hidden"
                             type="button"
                             tabindex="0"
                             role="checkbox"
@@ -1136,7 +1136,7 @@
               ></button>
             </div>
             <div id="addSignatureActionContainer" data-selected="type">
-              <div id="addSignatureTypeContainer" role="tabpanel" aria-labelledby="addSignatureTypeContainer">
+              <div id="addSignatureTypeContainer" role="tabpanel" aria-labelledby="addSignatureTypeButton">
                 <input id="addSignatureTypeInput" type="text" data-l10n-id="pdfjs-editor-add-signature-type-input" tabindex="0" />
               </div>
               <div id="addSignatureDrawContainer" role="tabpanel" aria-labelledby="addSignatureDrawButton" tabindex="-1">
@@ -1213,7 +1213,7 @@
         </dialog>
 
         <dialog class="dialog signatureDialog" id="editSignatureDescriptionDialog" aria-labelledby="editSignatureDescriptionTitle">
-          <div id="editSignatureDescriptionContainer" class="mainContainer">
+          <div class="mainContainer">
             <div class="title">
               <span id="editSignatureDescriptionTitle" role="sectionhead" data-l10n-id="pdfjs-editor-edit-signature-dialog-title" tabindex="0"></span>
             </div>

web/views_manager.css

@@ -418,15 +418,29 @@
         background-color: var(--status-actions-bg);
 
         #viewsManagerStatusActionLabelContainer > button {
+          position: relative;
           width: var(--icon-size);
           height: var(--icon-size);
-          mask-repeat: no-repeat;
-          mask-position: center;
-          background-color: var(--indicator-color);
-          mask-image: var(--pages-selected-icon);
           border: none;
           padding: 0;
           flex: 0 0 auto;
+
+          &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: var(--indicator-color);
+            mask-image: var(--pages-selected-icon);
+          }
+
+          &#viewsManagerStatusActionDeselectButton:focus-visible {
+            outline: 2px solid var(--button-focus-outline-color);
+            border: 1px solid var(--button-focus-border-color);
+            border-radius: 2px;
+            outline-offset: 1px;
+          }
         }
 
         #actionSelector {