1 files changed, 7 insertions, 0 deletions
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', () => {