mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00
Code Issues Releases Wiki 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
2 changed files with 14 additions and 6 deletions
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"
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>