From 212c0dfd076e4e504de135b2b41647199feb3696 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 2 Jan 2023 05:54:46 +0000 Subject: Docs: Make theme switcher accessible (#37780) * Make theme switcher accessible * set an explicit `aria-label` to the switcher (as the `` 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` --- site/static/docs/5.3/assets/js/color-modes.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'site/static/docs') 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 50a798649..fdd3303dc 100644 --- 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', () => { -- cgit v1.2.3