Skip to content

Commit 5865e38

Browse files
authored
Add label to theme-switcher button. (#543)
Fixes - #537 as suggested by @jamesprime by adding an [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) to labelless button. Confirmed with macOS's "VoiceOver" screen reader... ![Screenshot 2025-06-03 at 13 25 10](https://github.com/user-attachments/assets/93c86456-feca-4ff4-91d4-4b8c4afd5797) --- As with the ☼ / ☾ it's a bit WET because it needs declaring and then the same lines appear in the switch conditional.
1 parent 99fc90d commit 5865e38

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

docs/_includes/header_custom.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
<button class="btn js-toggle-dark-mode"></button>
1+
<button class="btn js-toggle-dark-mode" aria-label="Switch to light mode">
2+
3+
</button>
24

35
<script>
46
const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");
57
jtd.addEvent(toggleDarkMode, "click", function () {
68
if (jtd.getTheme() === "light") {
79
jtd.setTheme("dark");
810
toggleDarkMode.textContent = "☼";
11+
toggleDarkMode.ariaLabel = "Switch to light mode";
912
localStorage.setItem("theme", "dark");
1013
} else {
1114
jtd.setTheme("light");
1215
toggleDarkMode.textContent = "☾";
16+
toggleDarkMode.ariaLabel = "Switch to dark mode";
1317
localStorage.setItem("theme", "light");
1418
}
1519
});

0 commit comments

Comments
 (0)