Docs: Make theme switcher accessible (#37780)

* Make theme switcher accessible

* set an explicit `aria-label` to the switcher (as the `<span>` is not sufficient, as it can be display:none'd and then the button has no accName)
* make the theme buttons actual `aria-pressed` toggles

* Dynamically update aria-label for theme switcher

* Explicitly reset focus after activating theme

* Use innerText for the constructed dynamic aria-label

this way, if the text ever gets changed in the html, this will adapt appropriately

* Tweak accessible name for the dropdown

* Fixup

* Use `textContent` instead of `innerText`

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 4b942a65e7c8ead180b2637f4c6671ff81b2dff9..2795ec85b7b68e592f06eb4b131725ce0ceccd18 100644 (file)
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -90,27 +90,28 @@
                     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" style="--bs-dropdown-min-width: 8rem;">
               <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>

diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/5.3/assets/js/color-modes.js
index 50a798649accfb88f59f3633fc64e94757281391..fdd3303dc6492349b4f56814926229f53cecae0b 100644 (file)
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -28,16 +28,23 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = theme => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+    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')
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
     })
 
     btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    themeSwitcher.focus()
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {