Backport color-modes.js from upstream (#1619)

docs/assets/js/color-modes.js

@@ -1,10 +1,10 @@
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
 
-(function () {
+(() => {
   'use strict'
 
   const storedTheme = localStorage.getItem('theme')
@@ -27,17 +27,32 @@
 
   setTheme(getPreferredTheme())
 
-  const showActiveTheme = theme => {
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+
+    if (!themeSwitcher || !themeSwitcherText) {
+      return
+    }
+
     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)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -55,7 +70,7 @@
           const theme = toggle.getAttribute('data-bs-theme-value')
           localStorage.setItem('theme', theme)
           setTheme(theme)
-          showActiveTheme(theme)
+          showActiveTheme(theme, true)
         })
       })
   })