rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Remove autofocus on theme switch when page is loaded

Browse Source
This commit is contained in:
Julien Déramond 2023-01-08 15:58:59 +01:00 committed by Mark Otto
parent 1e33cfa272
commit 39905711fa
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,7 @@
setTheme(getPreferredTheme()) setTheme(getPreferredTheme())
const showActiveTheme = theme => { const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#bd-theme') const themeSwitcher = document.querySelector('#bd-theme')
const themeSwitcherText = document.querySelector('#bd-theme-text') const themeSwitcherText = document.querySelector('#bd-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active use') const activeThemeIcon = document.querySelector('.theme-icon-active use')
@ -44,7 +44,10 @@
activeThemeIcon.setAttribute('href', svgOfActiveBtn) activeThemeIcon.setAttribute('href', svgOfActiveBtn)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
themeSwitcher.focus()
if (focus) {
themeSwitcher.focus()
}
} }
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@ -62,7 +65,7 @@
const theme = toggle.getAttribute('data-bs-theme-value') const theme = toggle.getAttribute('data-bs-theme-value')
localStorage.setItem('theme', theme) localStorage.setItem('theme', theme)
setTheme(theme) setTheme(theme)
showActiveTheme(theme) showActiveTheme(theme, true)
}) })
}) })
}) })