From 4278cf50a5f23027fa5636a117ee404aa71c0c94 Mon Sep 17 00:00:00 2001
From: "dobby-yivi-agent[bot]"
 <275734547+dobby-yivi-agent[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 17:45:38 +0000
Subject: [PATCH] fix: add accessible labels to theme toggle buttons

Previously the only content inside each <label> was a decorative icon
with no accessible name. Screen readers announced the radio buttons
with no label at all.

Add a visually-hidden text span inside each label and mark the icon
aria-hidden. This gives each toggle option a clear accessible name
("Light mode" / "Dark mode") without changing the visual UI.

Closes #5
---
 src/lib/components/ThemeSwitcher.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index 3a02ae2..ef6a30c 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -60,7 +60,8 @@
 			onchange={() => setTheme('light')}
 		/>
 		<label class="theme-label" for="theme-light">
-			<Icon icon="mdi:white-balance-sunny" width="16" height="16" />
+			<Icon icon="mdi:white-balance-sunny" width="16" height="16" aria-hidden="true" />
+			<span class="visually-hidden">Light mode</span>
 		</label>
 	</div>
 
@@ -74,7 +75,8 @@
 			onchange={() => setTheme('dark')}
 		/>
 		<label class="theme-label" for="theme-dark">
-			<Icon icon="mdi:moon-waning-crescent" width="16" height="16" />
+			<Icon icon="mdi:moon-waning-crescent" width="16" height="16" aria-hidden="true" />
+			<span class="visually-hidden">Dark mode</span>
 		</label>
 	</div>
 </div>