fix(web): announce current theme to screen reader users (#12039)

immich-app · Aug 25, 2024 · 9605620 · 9605620
1 parent b2dd5a3
commit 9605620
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
@@ -7,8 +7,16 @@
 
   $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
   $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
+  $: isDark = $colorTheme.value === Theme.DARK;
 </script>
 
 {#if !$colorTheme.system}
-  <CircleIconButton title={$t('toggle_theme')} {icon} {viewBox} on:click={handleToggleTheme} />
+  <CircleIconButton
+    title={$t('toggle_theme')}
+    {icon}
+    {viewBox}
+    role="switch"
+    aria-checked={isDark ? 'true' : 'false'}
+    on:click={handleToggleTheme}
+  />
 {/if}
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
@@ -1171,7 +1171,7 @@
   "to_login": "Login",
   "to_trash": "Trash",
   "toggle_settings": "Toggle settings",
-  "toggle_theme": "Toggle theme",
+  "toggle_theme": "Toggle dark theme",
   "total_usage": "Total usage",
   "trash": "Trash",
   "trash_all": "Trash All",