Reduce some duplication when toggling "expanded" buttons in the viewer toolbars

This is very similar to PR 16281, but for buttons that use the "aria-expanded" attribute.

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");
+      toggleExpandedBtn(this.toggleButton, true, this.bar);
-      this.toggleButton.setAttribute("aria-expanded", "true");
-      this.bar.classList.remove("hidden");
     }
     this.findField.select();
     this.findField.focus();
@@ -188,9 +187,7 @@ class PDFFindBar {
       return;
     }
     this.opened = false;
-    this.toggleButton.classList.remove("toggled");
+    toggleExpandedBtn(this.toggleButton, false, this.bar);
-    this.toggleButton.setAttribute("aria-expanded", "false");
-    this.bar.classList.add("hidden");
 
     this.eventBus.dispatch("findbarclose", { source: this });
   }

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");
+    toggleExpandedBtn(this.toggleButton, true);
-    this.toggleButton.setAttribute("aria-expanded", "true");
 
     this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
 
@@ -257,8 +257,7 @@ class PDFSidebar {
       return;
     }
     this.isOpen = false;
-    this.toggleButton.classList.remove("toggled");
+    toggleExpandedBtn(this.toggleButton, false);
-    this.toggleButton.setAttribute("aria-expanded", "false");
 
     this.outerContainer.classList.add("sidebarMoving");
     this.outerContainer.classList.remove("sidebarOpen");

web/secondary_toolbar.js

@@ -18,6 +18,7 @@ import {
   ScrollMode,
   SpreadMode,
   toggleCheckedBtn,
+  toggleExpandedBtn,
 } from "./ui_utils.js";
 import { PagesCountLimit } from "./pdf_viewer.js";
 
@@ -292,9 +293,7 @@ class SecondaryToolbar {
       return;
     }
     this.opened = true;
-    this.toggleButton.classList.add("toggled");
+    toggleExpandedBtn(this.toggleButton, true, this.toolbar);
-    this.toggleButton.setAttribute("aria-expanded", "true");
-    this.toolbar.classList.remove("hidden");
   }
 
   close() {
@@ -302,9 +301,7 @@ class SecondaryToolbar {
       return;
     }
     this.opened = false;
-    this.toolbar.classList.add("hidden");
+    toggleExpandedBtn(this.toggleButton, false, this.toolbar);
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
   }
 
   toggle() {

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,