Fix theme toggle JavaScript and A11y (#1628)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
twbs · Mar 22, 2023 · b5dd471 · b5dd471
1 parent c8a682f
commit b5dd471
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/docs/assets/js/color-modes.js b/docs/assets/js/color-modes.js
@@ -29,12 +29,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/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
@@ -100,6 +100,10 @@
       }
     }
   }
+
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 }
 
 @include color-mode(dark) {

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
@@ -138,8 +138,7 @@
 
   .highlight {
     margin-bottom: 0;
-    color: var(--bs-gray-200);
-    background-color: var(--bs-gray-800);
+    background-color: var(--bs-tertiary-bg);
     border-radius: .5rem;
 
     pre {
@@ -153,7 +152,7 @@
 
   .btn-clipboard {
     top: .5em;
-    background-color: var(--bs-gray-800);
+    background-color: var(--bs-tertiary-bg);
   }
 
   .btn {

diff --git a/docs/layouts/partials/navbar.html b/docs/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>