From 2d5c64f5c1acd8dd70c89911b18a9ff0eca7234d Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 25 Aug 2024 16:08:16 -0400
Subject: [PATCH 1/2] fix(web): announce current theme to screen reader users

---
 .../lib/components/shared-components/theme-button.svelte | 9 ++++++++-
 web/src/lib/i18n/en.json                                 | 2 +-
 2 files changed, 9 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 7fc823f8ed995..843bb0ca9efce 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -7,8 +7,15 @@
 
   $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
   $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
+  $: isPressed = $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}
+    aria-pressed={isPressed ? 'true' : 'false'}
+    on:click={handleToggleTheme}
+  />
 {/if}
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index 43050fabdc2b3..d8d0c3f8c87b9 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",

From 382b11373b903447fa91576732d7e4eedf1d77ab Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 25 Aug 2024 19:36:20 -0400
Subject: [PATCH 2/2] chore: use switch for better support with Safari

---
 web/src/lib/components/shared-components/theme-button.svelte | 5 +++--
 1 file changed, 3 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 843bb0ca9efce..8376b7235990a 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -7,7 +7,7 @@
 
   $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
   $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
-  $: isPressed = $colorTheme.value === Theme.DARK;
+  $: isDark = $colorTheme.value === Theme.DARK;
 </script>
 
 {#if !$colorTheme.system}
@@ -15,7 +15,8 @@
     title={$t('toggle_theme')}
     {icon}
     {viewBox}
-    aria-pressed={isPressed ? 'true' : 'false'}
+    role="switch"
+    aria-checked={isDark ? 'true' : 'false'}
     on:click={handleToggleTheme}
   />
 {/if}