scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-11-15 09:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(a11y): the Ports list's Refresh and Open in new tab buttons aren't inside other buttons (#33430)

Browse source
This commit is contained in:
G30 2026-10-30 17:18:20 -04:00 • committed by GitHub
parent 8c308e4e88
commit feefe03bf2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/lib/components/chat/FileNav/PortList.svelte
View file

@ -57,25 +57,26 @@
</script>
<div class="px-2 py-1">
<button
<div
class="flex items-center gap-1 w-full text-xs font-normal text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100"
on:click={() => (expanded = !expanded)}
>
<Icon
name="chevron-down"
size={12}
strokeWidth={1.4}
class="transition-transform {expanded ? '' : '-rotate-90'}"
/>
{$i18n.t('Ports')}
<span class="ml-auto flex items-center gap-1">
<button class="flex flex-1 items-center gap-1" on:click={() => (expanded = !expanded)}>
<Icon
name="chevron-down"
size={12}
strokeWidth={1.4}
class="transition-transform {expanded ? '' : '-rotate-90'}"
/>
{$i18n.t('Ports')}
{#if ports.length > 0}
<span
class="text-[0.625rem] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
class="ml-auto text-[0.625rem] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
>
{ports.length}
</span>
{/if}
</button>
<span class="flex items-center gap-1">
<Tooltip content={$i18n.t('Refresh')}>
<button
class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
@ -86,7 +87,7 @@
</button>
</Tooltip>
</span>
</button>
</div>
{#if expanded}
<div class="mt-1 space-y-0.5 max-h-[9.375rem] overflow-y-auto">
@ -96,28 +97,30 @@
</div>
{:else}
{#each ports as port}
<button
<div
class="flex h-7 items-center w-full gap-2 px-1.5 text-xs rounded-lg hover:bg-gray-50/40 dark:hover:bg-white/4 transition-colors duration-75 group"
on:click={() => previewPort(port.port)}
>
<span class="font-mono text-blue-500 dark:text-blue-400 shrink-0">
:{port.port}
</span>
<span class="text-gray-500 dark:text-gray-400 truncate flex-1 text-left">
{port.process ?? ''}
</span>
<button
class="flex min-w-0 flex-1 items-center gap-2 self-stretch"
on:click={() => previewPort(port.port)}
>
<span class="font-mono text-blue-500 dark:text-blue-400 shrink-0">
:{port.port}
</span>
<span class="text-gray-500 dark:text-gray-400 truncate flex-1 text-left">
{port.process ?? ''}
</span>
</button>
<Tooltip content={$i18n.t('Open in new tab')}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
role="button"
tabindex="-1"
<button
class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 flex h-5 w-5 items-center justify-center rounded hover:text-gray-600 dark:hover:text-gray-300"
on:click|stopPropagation={() => openPortExternal(port.port)}
aria-label={$i18n.t('Open in new tab')}
on:click={() => openPortExternal(port.port)}
>
<Icon name="external-link" size={11} strokeWidth={1.4} />
</span>
</button>
</Tooltip>
</button>
</div>
{/each}
{/if}
</div>