Improve theme switcher accessibility, show check

This commit mirrors twbs/bootstrap#37780 with ~~a small fix~~ a fix from twbs/bootstrap#37836 and adds the missing checkmark icon to the theme dropdown.

Author: krzysdz

static/css/style.css

@@ -6,6 +6,10 @@
 	fill: currentcolor;
 }
 
+.checked-dropdown .active .bi {
+	display: block !important;
+}
+
 .logout-btn {
 	--bs-dropdown-link-color: var(--bs-danger-text);
 	--bs-border-color: var(--bs-danger-border-subtle);

static/js/theme_toggle.js

@@ -27,17 +27,27 @@
 
 	setTheme(getPreferredTheme());
 
-	const showActiveTheme = (theme) => {
+	const showActiveTheme = (theme, focus = false) => {
+		const themeSwitcher = document.querySelector("#theme-btn");
+		const themeSwitcherText = document.querySelector("#theme-toggle-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);
+
+		if (focus) {
+			themeSwitcher.focus();
+		}
 	};
 
 	window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
@@ -55,7 +65,7 @@
 				const theme = toggle.getAttribute("data-bs-theme-value");
 				localStorage.setItem("theme", theme);
 				setTheme(theme);
-				showActiveTheme(theme);
+				showActiveTheme(theme, true);
 			});
 		});
 	});

views/header.ejs

@@ -28,6 +28,10 @@
 		<symbol id="sun-fill" viewBox="0 0 16 16">
 			<path
 				d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+		</symbol>
+		<symbol id="check2" viewBox="0 0 16 16">
+			<path
+				d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
 		</symbol><% if (flashedMessages.length) { %>
 		<symbol id="check-circle-fill" viewBox="0 0 16 16">
 			<path
@@ -79,17 +83,17 @@
 						<li class="nav-item dropdown">
 							<button class="btn btn-link nav-link py-2 px-0 px-sm-2 dropdown-toggle d-flex align-items-center"
 								id="theme-btn" 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-sm-none ms-2">Toggle theme</span>
+								<span class="d-sm-none ms-2" id="theme-toggle-text">Toggle theme</span>
 							</button>
-							<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="theme-btn"
+							<ul class="dropdown-menu dropdown-menu-end checked-dropdown" aria-labelledby="theme-toggle-text"
 								style="--bs-dropdown-min-width: 8rem;">
 								<li>
 									<button type="button" class="dropdown-item d-flex align-items-center"
-										data-bs-theme-value="light">
+										data-bs-theme-value="light" aria-pressed="false">
 										<svg class="bi me-2 opacity-50 theme-icon">
 											<use href="#sun-fill"></use>
 										</svg>
@@ -101,7 +105,7 @@
 								</li>
 								<li>
 									<button type="button" class="dropdown-item d-flex align-items-center"
-										data-bs-theme-value="dark">
+										data-bs-theme-value="dark" aria-pressed="false">
 										<svg class="bi me-2 opacity-50 theme-icon">
 											<use href="#moon-stars-fill"></use>
 										</svg>
@@ -113,7 +117,7 @@
 								</li>
 								<li>
 									<button type="button" class="dropdown-item d-flex align-items-center active"
-										data-bs-theme-value="auto">
+										data-bs-theme-value="auto" aria-pressed="true">
 										<svg class="bi me-2 opacity-50 theme-icon">
 											<use href="#circle-half"></use>
 										</svg>