From 7e49c8733bf02de5e0a118af48b7ab94f7a49380 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 10:12:48 +0200
Subject: [PATCH 1/3] remove nested button and add label for assistive
 technology

---
 src/lib/components/chat/Navbar.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 6fcb7a6821..2b5a4279d1 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -173,19 +173,19 @@
 								}
 							}}
 						>
-							<button
+							<div
 								class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
-								aria-label="User Menu"
 							>
 								<div class=" self-center">
+									<span class="sr-only">{$i18n.t('User menu')}</span>
 									<img
 										src={$user?.profile_image_url}
 										class="size-6 object-cover rounded-full"
-										alt="User profile"
+										alt=""
 										draggable="false"
 									/>
 								</div>
-							</button>
+							</div>
 						</UserMenu>
 					{/if}
 				</div>

From b7255854d2b39c072df63087da6f97734ae1cf76 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 11:14:12 +0200
Subject: [PATCH 2/3] change interactive elements in dropdownmenu to
 dropdownitems

---
 .../components/layout/Sidebar/UserMenu.svelte | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index c76e3b6e3e..f77e915c51 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -72,7 +72,7 @@
 			align="start"
 			transition={(e) => fade(e, { duration: 100 })}
 		>
-			<button
+			<DropdownMenu.Item
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={async () => {
 					await showSettings.set(true);
@@ -87,9 +87,9 @@
 					<Settings className="w-5 h-5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Settings')}</div>
-			</button>
+			</DropdownMenu.Item>
 
-			<button
+			<DropdownMenu.Item
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={() => {
 					dispatch('show', 'archived-chat');
@@ -104,44 +104,40 @@
 					<ArchiveBox className="size-5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Archived Chats')}</div>
-			</button>
+			</DropdownMenu.Item>
 
 			{#if role === 'admin'}
-				<a
-					href="/playground"
+				<DropdownMenu.Item
 					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
 					on:click={() => {
 						show = false;
 						if ($mobile) {
 							showSidebar.set(false);
 						}
+						goto('/playground');
 					}}
-					rel="noopener noreferrer"
-					draggable="false"
 				>
 					<div class=" self-center mr-3">
 						<Code className="size-5" strokeWidth="1.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Playground')}</div>
-				</a>
+				</DropdownMenu.Item>
 
-				<a
-					href="/admin"
+				<DropdownMenu.Item
 					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
 					on:click={() => {
 						show = false;
 						if ($mobile) {
 							showSidebar.set(false);
 						}
+						goto('/admin');
 					}}
-					rel="noopener noreferrer"
-					draggable="false"
 				>
 					<div class=" self-center mr-3">
 						<UserGroup className="w-5 h-5" strokeWidth="1.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
-				</a>
+				</DropdownMenu.Item>
 			{/if}
 
 			{#if help}
@@ -188,7 +184,7 @@
 
 			<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
 
-			<button
+			<DropdownMenu.Item
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={async () => {
 					const res = await userSignOut();
@@ -203,7 +199,7 @@
 					<SignOut className="w-5 h-5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
-			</button>
+			</DropdownMenu.Item>
 
 			{#if usage}
 				{#if usage?.user_ids?.length > 0}

From 225d20fb84029148d5817a257caf8b82c0a9d02e Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 2 Jul 2025 11:29:03 +0200
Subject: [PATCH 3/3] aria hidden on decorative svgs to enhance accessibility

---
 src/lib/components/icons/ArchiveBox.svelte         | 1 +
 src/lib/components/icons/Code.svelte               | 1 +
 src/lib/components/icons/Map.svelte                | 1 +
 src/lib/components/icons/QuestionMarkCircle.svelte | 1 +
 src/lib/components/icons/Settings.svelte           | 1 +
 src/lib/components/icons/SignOut.svelte            | 1 +
 src/lib/components/icons/UserGroup.svelte          | 1 +
 7 files changed, 7 insertions(+)

diff --git a/src/lib/components/icons/ArchiveBox.svelte b/src/lib/components/icons/ArchiveBox.svelte
index d4f6e201ab..ef82cdba16 100644
--- a/src/lib/components/icons/ArchiveBox.svelte
+++ b/src/lib/components/icons/ArchiveBox.svelte
@@ -9,6 +9,7 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	aria-hidden="true"
 	class={className}
 >
 	<path
diff --git a/src/lib/components/icons/Code.svelte b/src/lib/components/icons/Code.svelte
index 824df1b403..793094e2b4 100644
--- a/src/lib/components/icons/Code.svelte
+++ b/src/lib/components/icons/Code.svelte
@@ -7,6 +7,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
+	aria-hidden="true"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}
diff --git a/src/lib/components/icons/Map.svelte b/src/lib/components/icons/Map.svelte
index 2ae0ce6a82..93655576cd 100644
--- a/src/lib/components/icons/Map.svelte
+++ b/src/lib/components/icons/Map.svelte
@@ -7,6 +7,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
+	aria-hidden="true"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}
diff --git a/src/lib/components/icons/QuestionMarkCircle.svelte b/src/lib/components/icons/QuestionMarkCircle.svelte
index 79c2e7d84c..55156392c0 100644
--- a/src/lib/components/icons/QuestionMarkCircle.svelte
+++ b/src/lib/components/icons/QuestionMarkCircle.svelte
@@ -9,6 +9,7 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	aria-hidden="true"
 	class={className}
 >
 	<path
diff --git a/src/lib/components/icons/Settings.svelte b/src/lib/components/icons/Settings.svelte
index 4e622cda89..40fed35080 100644
--- a/src/lib/components/icons/Settings.svelte
+++ b/src/lib/components/icons/Settings.svelte
@@ -9,6 +9,7 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	aria-hidden="true"
 	class={className}
 >
 	<path
diff --git a/src/lib/components/icons/SignOut.svelte b/src/lib/components/icons/SignOut.svelte
index 1293c0c913..10a4c77d70 100644
--- a/src/lib/components/icons/SignOut.svelte
+++ b/src/lib/components/icons/SignOut.svelte
@@ -8,6 +8,7 @@
 		fill-rule="evenodd"
 		d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z"
 		clip-rule="evenodd"
+		aria-hidden="true"
 	/>
 	<path
 		fill-rule="evenodd"
diff --git a/src/lib/components/icons/UserGroup.svelte b/src/lib/components/icons/UserGroup.svelte
index b3e9d6ff17..497c2f479f 100644
--- a/src/lib/components/icons/UserGroup.svelte
+++ b/src/lib/components/icons/UserGroup.svelte
@@ -7,6 +7,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
+	aria-hidden="true"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}