root
/
open-webui
mirror of https://github.com/open-webui/open-webui.git
1
0
Fork 0
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Merge pull request #16186 from itk-dev/feature/user-menu-tab-order-and-menu-item-accessibility 

FEAT: user menu tab order and menu item accessibility
This commit is contained in:
Tim Jaeryang Baek 2025-07-31 17:48:17 +04:00 committed by GitHub
parent 6a17ba5b7a 3dc23368aa
commit b378ac1f57
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/layout/Sidebar.svelte
View File

@ -68,7 +68,6 @@
let shiftKey = false; let shiftKey = false;
let selectedChatId = null; let selectedChatId = null;
let showDropdown = false;
let showPinnedChat = true; let showPinnedChat = true;
let showCreateChannel = false; let showCreateChannel = false;
@ -1035,21 +1034,19 @@
} }
}} }}
> >
<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" 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"> <div class=" self-center mr-3">
<img <img
src={$user?.profile_image_url} src={$user?.profile_image_url}
class=" max-w-[30px] object-cover rounded-full" 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>
<div class=" self-center font-medium">{$user?.name}</div> <div class=" self-center font-medium">{$user?.name}</div>
</button> </div>
</UserMenu> </UserMenu>
{/if} {/if}
</div> </div>

38
src/lib/components/layout/Sidebar/UserMenu.svelte
View File

@ -105,9 +105,10 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{#if role === 'admin'} {#if role === 'admin'}
<a <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" as="a"
href="/playground" 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={() => { on:click={() => {
show = false; show = false;
if ($mobile) { if ($mobile) {
@ -119,11 +120,11 @@
<Code className="size-5" strokeWidth="1.5" /> <Code className="size-5" strokeWidth="1.5" />
</div> </div>
<div class=" self-center truncate">{$i18n.t('Playground')}</div> <div class=" self-center truncate">{$i18n.t('Playground')}</div>
</a> </DropdownMenu.Item>
<DropdownMenu.Item
<a as="a"
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
href="/admin" 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={() => { on:click={() => {
show = false; show = false;
if ($mobile) { if ($mobile) {
@ -135,39 +136,40 @@
<UserGroup className="w-5 h-5" strokeWidth="1.5" /> <UserGroup className="w-5 h-5" strokeWidth="1.5" />
</div> </div>
<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div> <div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
</a> </DropdownMenu.Item>
{/if} {/if}
{#if help} {#if help}
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" /> <hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
<!-- {$i18n.t('Help')} --> <!-- {$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" 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" id="chat-share-button"
href="https://docs.openwebui.com"
target="_blank"
on:click={() => { on:click={() => {
show = false; show = false;
}} }}
href="https://docs.openwebui.com'"
> >
<QuestionMarkCircle className="size-5" /> <QuestionMarkCircle className="size-5" />
<div class="flex items-center">{$i18n.t('Documentation')}</div> <div class="flex items-center">{$i18n.t('Documentation')}</div>
</a> </DropdownMenu.Item>
<!-- Releases --> <!-- 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" 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" id="chat-share-button"
href="https://github.com/open-webui/open-webui/releases"
target="_blank"
on:click={() => { on:click={() => {
show = false; show = false;
}} }}
href="https://github.com/open-webui/"
> >
<Map className="size-5" /> <Map className="size-5" />
<div class="flex items-center">{$i18n.t('Releases')}</div> <div class="flex items-center">{$i18n.t('Releases')}</div>
</a> </DropdownMenu.Item>
<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" 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" /> <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" class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={async () => { on:click={async () => {
const res = await userSignOut(); const res = await userSignOut();
@ -199,7 +201,7 @@
<SignOut className="w-5 h-5" strokeWidth="1.5" /> <SignOut className="w-5 h-5" strokeWidth="1.5" />
</div> </div>
<div class=" self-center truncate">{$i18n.t('Sign Out')}</div> <div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
</button> </DropdownMenu.Item>
{#if usage} {#if usage}
{#if usage?.user_ids?.length > 0} {#if usage?.user_ids?.length > 0}