From 68e24b22d7926d41b56a1f02c9b49842c22c35c1 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 00:50:28 +0000
Subject: [PATCH 1/7] 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
---
 site/layouts/partials/docs-navbar.html        | 9 +++++----
 site/static/docs/5.3/assets/js/color-modes.js | 2 ++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 4b942a65e7c8..e38ad17425b0 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -90,27 +90,28 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
                     type="button"
                     aria-expanded="false"
                     data-bs-toggle="dropdown"
-                    data-bs-display="static">
+                    data-bs-display="static"
+                    aria-label="Toggle theme">
               <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
               <span class="d-lg-none ms-2">Toggle theme</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" 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>
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 50a798649acc..e5f4462bf7ce 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -34,9 +34,11 @@
 
     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)
   }
 

From 304202e8725a1f3901116fc8a4c4ee7c0243795c Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 01:26:06 +0000
Subject: [PATCH 2/7] Dynamically update aria-label for theme switcher

---
 site/layouts/partials/docs-navbar.html        | 2 +-
 site/static/docs/5.3/assets/js/color-modes.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index e38ad17425b0..78a8585117d3 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -91,7 +91,7 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
                     aria-expanded="false"
                     data-bs-toggle="dropdown"
                     data-bs-display="static"
-                    aria-label="Toggle theme">
+                    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>
             </button>
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 e5f4462bf7ce..af194b24032e 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -28,6 +28,7 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = theme => {
+    const themeSwitcher = document.querySelector('#bd-theme')
     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')
@@ -40,6 +41,8 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `Toggle theme (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {

From 761f5477d45efe1106e8b7b5679aa1c1c9668504 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 01:38:55 +0000
Subject: [PATCH 3/7] Explicitly reset focus after activating theme

---
 site/static/docs/5.3/assets/js/color-modes.js | 1 +
 1 file changed, 1 insertion(+)

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 af194b24032e..d56354df3222 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -43,6 +43,7 @@
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
     const themeSwitcherLabel = `Toggle theme (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    themeSwitcher.focus()
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {

From 6b5c189b13787d07ec9d0a92abed25e175ad3ded Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 01:43:27 +0000
Subject: [PATCH 4/7] Use innerText for the constructed dynamic aria-label

this way, if the text ever gets changed in the html, this will adapt appropriately
---
 site/static/docs/5.3/assets/js/color-modes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 d56354df3222..f58d8095c0e5 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -41,7 +41,7 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `Toggle theme (${btnToActive.dataset.bsThemeValue})`
+    const themeSwitcherLabel = `${themeSwitcher.innerText} (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
     themeSwitcher.focus()
   }

From 0b5fe485152c447668aba4ba2743ccaf1c1406db Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 01:48:23 +0000
Subject: [PATCH 5/7] Tweak accessible name for the dropdown

---
 site/layouts/partials/docs-navbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 78a8585117d3..e6ffe2db8239 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -95,7 +95,7 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
               <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
               <span class="d-lg-none ms-2">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-label="Toggle theme" style="--bs-dropdown-min-width: 8rem;">
               <li>
                 <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>

From 886b3018b0828c027d5578e4023a5c2b0acac856 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 01:56:49 +0000
Subject: [PATCH 6/7] Fixup

---
 site/layouts/partials/docs-navbar.html        | 4 ++--
 site/static/docs/5.3/assets/js/color-modes.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index e6ffe2db8239..2795ec85b7b6 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -93,9 +93,9 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
                     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-label="Toggle 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" aria-pressed="false">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
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 f58d8095c0e5..a48f217ff6a4 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -29,6 +29,7 @@
 
   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')
@@ -41,7 +42,7 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `${themeSwitcher.innerText} (${btnToActive.dataset.bsThemeValue})`
+    const themeSwitcherLabel = `${themeSwitcherText.innerText} (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
     themeSwitcher.focus()
   }

From 0da86120c3d025e544508165a9aea0f08aec6850 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 2 Jan 2023 02:14:32 +0000
Subject: [PATCH 7/7] Use `textContent` instead of `innerText`

---
 site/static/docs/5.3/assets/js/color-modes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a48f217ff6a4..fdd3303dc649 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -42,7 +42,7 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `${themeSwitcherText.innerText} (${btnToActive.dataset.bsThemeValue})`
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
     themeSwitcher.focus()
   }