rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Docs: Make theme switcher accessible (#37780)

Browse Source 
* 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`
This commit is contained in:
Patrick H. Lauke 2023-01-02 05:54:46 +00:00 committed by GitHub
parent 2cc580e2d1
commit 212c0dfd07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
site/layouts/partials/docs-navbar.html
View File

@ -90,27 +90,28 @@
type="button" type="button"
aria-expanded="false" aria-expanded="false"
data-bs-toggle="dropdown" 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> <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> </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> <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> <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<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> <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<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> <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>

7
site/static/docs/5.3/assets/js/color-modes.js
View File

@ -28,16 +28,23 @@
setTheme(getPreferredTheme()) setTheme(getPreferredTheme())
const showActiveTheme = theme => { 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 activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
document.querySelectorAll('[data-bs-theme-value]').forEach(element => { document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active') element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
}) })
btnToActive.classList.add('active') btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.setAttribute('href', svgOfActiveBtn) 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', () => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {