Fix theme toggle JavaScript and A11y (#355)

twbs · Mar 22, 2023 · 50479d4 · 50479d4
1 parent 952dfb0
commit 50479d4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/assets/js/color-modes.js b/src/assets/js/color-modes.js
@@ -27,12 +27,12 @@
 
   const showActiveTheme = (theme, focus = false) => {
     const themeSwitcher = document.querySelector('#bd-theme')
-    const themeSwitcherText = document.querySelector('#bd-theme-text')
 
-    if (!themeSwitcher || !themeSwitcherText) {
+    if (!themeSwitcher) {
       return
     }
 
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
     const activeThemeIcon = document.querySelector('.theme-icon-active use')
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
     const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
@@ -100,6 +100,10 @@
       }
     }
   }
+
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 }
 
 @include color-mode(dark) {

diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html
@@ -82,27 +82,28 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
                     type="button"
                     aria-expanded="false"
                     data-bs-toggle="dropdown"
-                    data-bs-display="static">
+                    data-bs-display="static"
+                    aria-label="Toggle theme (auto)">
               <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
-              <span class="d-lg-none ms-2">Toggle theme</span>
+              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
             </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
                   Light
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
               </li>
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
                   Dark
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
                 </button>
               </li>
               <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
                   Auto
                   <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,10 @@ @@
           }
         }
       }
+      .dropdown-menu-end {
+        --bs-dropdown-min-width: 8rem;
+      }
     }
     @include color-mode(dark) {
@@ Expand Down @@