Merge pull request #16410 from Snuffleupagus/toggleExpandedBtn

Reduce some duplication when toggling "expanded" buttons in the viewer toolbars
mozilla · May 11, 2023 · 9417a37 · 9417a37
2 parents d520754 + 0305b04
commit 9417a37
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js
@@ -14,6 +14,7 @@
  */
 
 import { FindState } from "./pdf_find_controller.js";
+import { toggleExpandedBtn } from "./ui_utils.js";
 
 const MATCHES_COUNT_LIMIT = 1000;
 
@@ -173,9 +174,7 @@ class PDFFindBar {
   open() {
     if (!this.opened) {
       this.opened = true;
-      this.toggleButton.classList.add("toggled");
-      this.toggleButton.setAttribute("aria-expanded", "true");
-      this.bar.classList.remove("hidden");
+      toggleExpandedBtn(this.toggleButton, true, this.bar);
     }
     this.findField.select();
     this.findField.focus();
@@ -188,9 +187,7 @@ class PDFFindBar {
       return;
     }
     this.opened = false;
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
-    this.bar.classList.add("hidden");
+    toggleExpandedBtn(this.toggleButton, false, this.bar);
 
     this.eventBus.dispatch("findbarclose", { source: this });
   }

diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js
@@ -18,6 +18,7 @@ import {
   RenderingStates,
   SidebarView,
   toggleCheckedBtn,
+  toggleExpandedBtn,
 } from "./ui_utils.js";
 
 const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
@@ -238,8 +239,7 @@ class PDFSidebar {
       return;
     }
     this.isOpen = true;
-    this.toggleButton.classList.add("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "true");
+    toggleExpandedBtn(this.toggleButton, true);
 
     this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
 
@@ -257,8 +257,7 @@ class PDFSidebar {
       return;
     }
     this.isOpen = false;
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
+    toggleExpandedBtn(this.toggleButton, false);
 
     this.outerContainer.classList.add("sidebarMoving");
     this.outerContainer.classList.remove("sidebarOpen");

diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
@@ -18,6 +18,7 @@ import {
   ScrollMode,
   SpreadMode,
   toggleCheckedBtn,
+  toggleExpandedBtn,
 } from "./ui_utils.js";
 import { PagesCountLimit } from "./pdf_viewer.js";
 
@@ -292,19 +293,15 @@ class SecondaryToolbar {
       return;
     }
     this.opened = true;
-    this.toggleButton.classList.add("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "true");
-    this.toolbar.classList.remove("hidden");
+    toggleExpandedBtn(this.toggleButton, true, this.toolbar);
   }
 
   close() {
     if (!this.opened) {
       return;
     }
     this.opened = false;
-    this.toolbar.classList.add("hidden");
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
+    toggleExpandedBtn(this.toggleButton, false, this.toolbar);
   }
 
   toggle() {

diff --git a/web/ui_utils.js b/web/ui_utils.js
@@ -851,6 +851,13 @@ function toggleCheckedBtn(button, toggle, view = null) {
   view?.classList.toggle("hidden", !toggle);
 }
 
+function toggleExpandedBtn(button, toggle, view = null) {
+  button.classList.toggle("toggled", toggle);
+  button.setAttribute("aria-expanded", toggle);
+
+  view?.classList.toggle("hidden", !toggle);
+}
+
 export {
   animationStarted,
   apiPageLayoutToViewerModes,
@@ -891,6 +898,7 @@ export {
   SpreadMode,
   TextLayerMode,
   toggleCheckedBtn,
+  toggleExpandedBtn,
   UNKNOWN_SCALE,
   VERTICAL_PADDING,
   watchScroll,

diff --git a/web/viewer.html b/web/viewer.html
@@ -332,10 +332,10 @@
                 <div class="verticalToolbarSeparator hiddenMediumView"></div>
 
                 <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
-                  <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" tabindex="34" data-l10n-id="editor_free_text2">
+                  <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="editor_free_text2">
                     <span data-l10n-id="editor_free_text2_label">Text</span>
                   </button>
-                  <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" tabindex="35" data-l10n-id="editor_ink2">
+                  <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="editor_ink2">
                     <span data-l10n-id="editor_ink2_label">Draw</span>
                   </button>
                 </div>