Author: Mo Balti [65825731+mobalti@users.noreply.github.com]
Committer: GitHub [noreply@github.com] Fri, 21 Apr 2023 16:01:31 +0000
Hash: 3438ff78dd80d577bcfb2152c2c704e78bbd96b5
Timestamp: Fri, 21 Apr 2023 16:01:31 +0000 (1 year ago)

+2 -2 +/-2 browse
Fix accessibility issues on theme toggle button (#365)
Fix accessibility issues on theme toggle button (#365)

1diff --git a/docsite/index.html b/docsite/index.html
2index 3b912b9..1d04645 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -65,7 +65,7 @@
6 Try in browser
7 <small class="green-badge">RAD</small>
8 </a>
9- <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-live="auto">
10+ <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
11 <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
12 <!-- https://feathericons.com/?query=sun -->
13 <mask id="moon">
14 diff --git a/docsite/public/theme-toggle.js b/docsite/public/theme-toggle.js
15index 44dfbda..51baf74 100644
16--- a/docsite/public/theme-toggle.js
17+++ b/docsite/public/theme-toggle.js
18 @@ -15,7 +15,7 @@ const setPreference = () => {
19
20 const reflectPreference = () => {
21 document.firstElementChild.setAttribute('data-theme', theme.value)
22- document.querySelector('#theme-toggle')?.setAttribute('aria-live', theme.value)
23+ document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value)
24 }
25
26 const theme = {