From bab17136ed413fb3716933ba297bc535fec70386 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 18 Mar 2026 12:53:44 +0100
Subject: [PATCH] Fix the outline of the deselect button in the sidebar (bug
 2024156)

I noticed a typo in class name (hiddden for hidden) and I found few others I fixed.
---
 web/viewer.html       |  6 +++---
 web/views_manager.css | 22 ++++++++++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/viewer.html b/web/viewer.html
index 3eeb5c25c..c7713abe2 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -191,7 +191,7 @@ See https://github.com/adobe-type-tools/cmap-resources
                         <span id="viewsManagerStatusActionLabelContainer" class="viewsManagerStatusLabel">
                           <button
                             id="viewsManagerStatusActionDeselectButton"
-                            class="hiddden"
+                            class="hidden"
                             type="button"
                             tabindex="0"
                             role="checkbox"
@@ -1136,7 +1136,7 @@ See https://github.com/adobe-type-tools/cmap-resources
               ></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 @@ See https://github.com/adobe-type-tools/cmap-resources
         </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>
diff --git a/web/views_manager.css b/web/views_manager.css
index a5b3ad029..987922454 100644
--- a/web/views_manager.css
+++ b/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 {