From b5dd4718b646d20ac404d3fe20f291ebd08b8526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 22 Mar 2023 08:18:28 +0100
Subject: [PATCH] Fix theme toggle JavaScript and A11y (#1628)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 docs/assets/js/color-modes.js     |  4 ++--
 docs/assets/scss/_navbar.scss     |  4 ++++
 docs/assets/scss/docs.scss        |  5 ++---
 docs/layouts/partials/navbar.html | 13 +++++++------
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/assets/js/color-modes.js b/docs/assets/js/color-modes.js
index 541fcc21b5..4528ba36b8 100644
--- a/docs/assets/js/color-modes.js
+++ b/docs/assets/js/color-modes.js
@@ -29,12 +29,12 @@
 
   const showActiveTheme = (theme, focus = false) => {
     const themeSwitcher = document.querySelector('#bd-theme')
-    const themeSwitcherText = document.querySelector('#bd-theme-text')
 
-    if (!themeSwitcher || !themeSwitcherText) {
+    if (!themeSwitcher) {
       return
     }
 
+    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')
diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
index e0e0f9e445..c16ada791a 100644
--- a/docs/assets/scss/_navbar.scss
+++ b/docs/assets/scss/_navbar.scss
@@ -100,6 +100,10 @@
       }
     }
   }
+
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 }
 
 @include color-mode(dark) {
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index e20366ba7f..a3ae687e9a 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -138,8 +138,7 @@
 
   .highlight {
     margin-bottom: 0;
-    color: var(--bs-gray-200);
-    background-color: var(--bs-gray-800);
+    background-color: var(--bs-tertiary-bg);
     border-radius: .5rem;
 
     pre {
@@ -153,7 +152,7 @@
 
   .btn-clipboard {
     top: .5em;
-    background-color: var(--bs-gray-800);
+    background-color: var(--bs-tertiary-bg);
   }
 
   .btn {
diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
index aa23a8bfc8..6d68fd5822 100644
--- a/docs/layouts/partials/navbar.html
+++ b/docs/layouts/partials/navbar.html
@@ -82,27 +82,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 (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-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
               <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>