ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 04:45:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #16321 from itk-dev/feature/more-accessible-menu

Browse source 
Feat: enhance accessibility of menu
This commit is contained in:
Tim Jaeryang Baek 2025-08-06 15:13:13 +04:00 committed by GitHub
commit 91952096c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/chat/ModelSelector/ModelItem.svelte
View file

@ -255,6 +255,7 @@
}}
>
<button
aria-label={`${$i18n.t('More Options')}`}
class="flex"
on:click={(e) => {
e.preventDefault();

16
src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
View file

@ -32,7 +32,12 @@
typeahead={false}
>
<DropdownMenu.Trigger>
<Tooltip content={$i18n.t('More')} className=" group-hover/item:opacity-100 opacity-0">
<Tooltip
content={$i18n.t('More')}
className={($settings?.highContrastMode ?? false)
? ''
: 'group-hover/item:opacity-100 opacity-0'}
>
<slot />
</Tooltip>
</DropdownMenu.Trigger>
@ -45,8 +50,9 @@
align="end"
transition={flyAndScale}
>
<button
<DropdownMenu.Item
type="button"
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
e.stopPropagation();
@ -69,9 +75,9 @@
{$i18n.t('Keep in Sidebar')}
{/if}
</div>
</button>
</DropdownMenu.Item>
<button
<DropdownMenu.Item
type="button"
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => {
@ -85,6 +91,6 @@
<Link />
<div class="flex items-center">{$i18n.t('Copy Link')}</div>
</button>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>

10
src/lib/components/chat/ModelSelector/Selector.svelte
View file

@ -394,6 +394,7 @@
class="w-full text-sm bg-transparent outline-hidden"
placeholder={searchPlaceholder}
autocomplete="off"
aria-label={$i18n.t('Search In Models')}
on:keydown={(e) => {
if (e.code === 'Enter' && filteredItems.length > 0) {
value = filteredItems[selectedModelIdx].value;
@ -436,6 +437,7 @@
selectedConnectionType === ''
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedTag === '' && selectedConnectionType === ''}
on:click={() => {
selectedConnectionType = '';
selectedTag = '';
@ -450,6 +452,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'local'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'local'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'local';
@ -464,6 +467,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'external'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'external'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'external';
@ -478,6 +482,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'direct'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'direct'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'direct';
@ -492,6 +497,7 @@
class="min-w-fit outline-none p-1.5 {selectedTag === tag
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedTag === tag}
on:click={() => {
selectedConnectionType = '';
selectedTag = tag;
@ -613,7 +619,7 @@
{#if showTemporaryChatControl}
<div class="flex items-center mx-2 mt-1 mb-2">
<button
<DropdownMenu.Item
class="flex justify-between w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 px-3 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted"
on:click={async () => {
temporaryChatEnabled.set(!$temporaryChatEnabled);
@ -642,7 +648,7 @@
<div>
<Switch state={$temporaryChatEnabled} />
</div>
</button>
</DropdownMenu.Item>
</div>
{:else}
<div class="mb-3"></div>

1
src/lib/components/icons/ChatBubbleOval.svelte
View file

@ -9,6 +9,7 @@
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
>
<path

1
src/lib/components/icons/Eye.svelte
View file

@ -10,6 +10,7 @@
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
aria-hidden="true"
>
<path
stroke-linecap="round"

1
src/lib/components/icons/EyeSlash.svelte
View file

@ -10,6 +10,7 @@
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
aria-hidden="true"
>
<path
stroke-linecap="round"

1
src/lib/components/icons/Link.svelte
View file

@ -7,6 +7,7 @@
fill-rule="evenodd"
d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
aria-hidden="true"
/>
<path
fill-rule="evenodd"

1
src/lib/components/icons/Search.svelte
View file

@ -9,6 +9,7 @@
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
>
<path