From 30218a6db0e1b6e32f8265e46198eeed60663eb2 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Thu, 31 Jul 2025 10:32:15 +0200
Subject: [PATCH 1/3] remove duplicate button in user menu to improve tab order

---
 src/lib/components/layout/Sidebar.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 8615c32780..972d923820 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -68,7 +68,6 @@
 	let shiftKey = false;
 
 	let selectedChatId = null;
-	let showDropdown = false;
 	let showPinnedChat = true;
 
 	let showCreateChannel = false;
@@ -1035,11 +1034,8 @@
 							}
 						}}
 					>
-						<button
+						<div
 							class=" flex items-center rounded-xl py-2.5 px-2.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-							on:click={() => {
-								showDropdown = !showDropdown;
-							}}
 						>
 							<div class=" self-center mr-3">
 								<img
@@ -1049,7 +1045,7 @@
 								/>
 							</div>
 							<div class=" self-center font-medium">{$user?.name}</div>
-						</button>
+						</div>
 					</UserMenu>
 				{/if}
 			</div>

From 77babb6b63fabace754364c8db86e77cc1035f99 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Thu, 31 Jul 2025 10:32:32 +0200
Subject: [PATCH 2/3] add aria label, make alt text translatable

---
 src/lib/components/layout/Sidebar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 972d923820..f3f54b95ab 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1041,7 +1041,8 @@
 								<img
 									src={$user?.profile_image_url}
 									class=" max-w-[30px] object-cover rounded-full"
-									alt="User profile"
+									alt={$i18n.t('Open User Profile Menu')}
+									aria-label={$i18n.t('Open User Profile Menu')}
 								/>
 							</div>
 							<div class=" self-center font-medium">{$user?.name}</div>

From 3dc23368aa6827d06d0782cdaf5fc58bf91dc832 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Thu, 31 Jul 2025 15:33:27 +0200
Subject: [PATCH 3/3] use bits-ui dropdownmenu item to make menu items
 focusable

---
 .../components/layout/Sidebar/UserMenu.svelte | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index 2ba0b2f14e..1c78cf8311 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -105,9 +105,10 @@
 			</DropdownMenu.Item>
 
 			{#if role === 'admin'}
-				<a
-					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
+				<DropdownMenu.Item
+					as="a"
 					href="/playground"
+					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) {
@@ -119,11 +120,11 @@
 						<Code className="size-5" strokeWidth="1.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Playground')}</div>
-				</a>
-
-				<a
-					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
+				</DropdownMenu.Item>
+				<DropdownMenu.Item
+					as="a"
 					href="/admin"
+					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) {
@@ -135,39 +136,40 @@
 						<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}
 				<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
 
 				<!-- {$i18n.t('Help')} -->
-				<a
+
+				<DropdownMenu.Item
+					as="a"
 					class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition"
 					id="chat-share-button"
-					href="https://docs.openwebui.com"
-					target="_blank"
 					on:click={() => {
 						show = false;
 					}}
+					href="https://docs.openwebui.com'"
 				>
 					<QuestionMarkCircle className="size-5" />
 					<div class="flex items-center">{$i18n.t('Documentation')}</div>
-				</a>
+				</DropdownMenu.Item>
 
 				<!-- Releases -->
-				<a
+				<DropdownMenu.Item
+					as="a"
 					class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition"
-					id="menu-item-releases"
-					href="https://github.com/open-webui/open-webui/releases"
-					target="_blank"
+					id="chat-share-button"
 					on:click={() => {
 						show = false;
 					}}
+					href="https://github.com/open-webui/"
 				>
 					<Map className="size-5" />
 					<div class="flex items-center">{$i18n.t('Releases')}</div>
-				</a>
+				</DropdownMenu.Item>
 
 				<DropdownMenu.Item
 					class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition cursor-pointer"
@@ -184,7 +186,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();
@@ -199,7 +201,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}