From 96056208fc823e81051482a8189bca8d5aed97fd Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 25 Aug 2024 19:50:54 -0400
Subject: [PATCH] fix(web): announce current theme to screen reader users
 (#12039)

---
 .../components/shared-components/theme-button.svelte   | 10 +++++++++-
 web/src/lib/i18n/en.json                               |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index 7fc823f8ed..8376b72359 100644
--- 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
index 43050fabdc..d8d0c3f8c8 100644
--- 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",