scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-28 06:22:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(a11y): list rows in Workspace, Functions and Automations aren't buttons around their controls; each name is a link (#33102)

Browse source
This commit is contained in:
G30 2026-10-24 19:05:23 -04:00 • committed by GitHub
parent d1776b18a3
commit ece6bc1a55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 49 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/admin/Functions.svelte
View file

@ -501,19 +501,11 @@
{#each filteredItems as func (func.id)}
<div
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
role="button"
tabindex="0"
role="presentation"
on:click={(e) => {
if (shouldIgnoreRowClick(e.target)) return;
openFunction(func);
}}
on:keydown={(e) => {
if (e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openFunction(func);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
@ -526,11 +518,11 @@
</div>
<Tooltip content={func.id} className="min-w-0" placement="top-start">
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
<a
href={`/admin/functions/edit?id=${encodeURIComponent(func.id)}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{resolveLocalizedResource(func, $i18n.language)}</a
>
{resolveLocalizedResource(func, $i18n.language)}
</div>
</Tooltip>
{#if func?.meta?.manifest?.version}

27
src/lib/components/workspace/Knowledge.svelte
View file

@ -443,19 +443,11 @@
{@const metaPreview = getKnowledgeMetaPreview(item)}
<div
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
role="button"
tabindex="0"
role="presentation"
on:click={(e) => {
if (shouldIgnoreRowClick(e.target)) return;
openKnowledge(item);
}}
on:keydown={(e) => {
if (e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openKnowledge(item);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
@ -466,11 +458,18 @@
className="min-w-0"
placement="top-start"
>
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
>
{item.name}
</div>
{#if !item?.meta?.document}
<a
href={`/workspace/knowledge/${item.id}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{item.name}</a
>
{:else}
<span
class="block truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
>{item.name}</span
>
{/if}
</Tooltip>
{#if item?.meta?.source === 'external'}

10
src/lib/components/workspace/Models.svelte
View file

@ -770,19 +770,11 @@
? 'cursor-pointer'
: ''} {model?.meta?.hidden ? 'opacity-50 dark:opacity-50' : ''}"
id="model-item-{model.id}"
role="button"
tabindex={model.write_access ? 0 : -1}
role="presentation"
on:click={(e) => {
if (shouldIgnoreRowClick(e.target)) return;
openModel(model);
}}
on:keydown={(e) => {
if (e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openModel(model);
}
}}
>
<div class="shrink-0 self-center">
<div class="{model.is_active ? '' : 'opacity-50 dark:opacity-50'} bg-transparent">

18
src/lib/components/workspace/Prompts.svelte
View file

@ -578,30 +578,22 @@
{#each prompts as prompt (prompt.id)}
<div
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
role="button"
tabindex="0"
role="presentation"
on:click={(e) => {
if (shouldIgnoreRowClick(e.target)) return;
openPrompt(prompt);
}}
on:keydown={(e) => {
if (e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openPrompt(prompt);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
<Tooltip content={prompt.name} className="min-w-0" placement="top-start">
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
<a
href={`/workspace/prompts/${prompt.id}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{prompt.name}</a
>
{prompt.name}
</div>
</Tooltip>
<div

18
src/lib/components/workspace/Skills.svelte
View file

@ -494,30 +494,22 @@
{#each filteredItems as skill (skill.id)}
<div
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
role="button"
tabindex="0"
role="presentation"
on:click={(e) => {
if (shouldIgnoreRowClick(e.target)) return;
openSkill(skill);
}}
on:keydown={(e) => {
if (e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openSkill(skill);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
<Tooltip content={skill.id} className="min-w-0" placement="top-start">
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
<a
href={`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{resolveLocalizedResource(skill, $i18n.language)}</a
>
{resolveLocalizedResource(skill, $i18n.language)}
</div>
</Tooltip>
<div

27
src/lib/components/workspace/Tools.svelte
View file

@ -438,30 +438,29 @@
class="group flex min-h-8 w-full items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left {tool.write_access
? 'cursor-pointer'
: 'cursor-not-allowed opacity-60'}"
role="button"
tabindex={tool.write_access ? 0 : -1}
role="presentation"
on:click={(e) => {
if (!tool.write_access || shouldIgnoreRowClick(e.target)) return;
openTool(tool);
}}
on:keydown={(e) => {
if (!tool.write_access || e.currentTarget !== e.target) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openTool(tool);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
<Tooltip content={tool.id} className="min-w-0" placement="top-start">
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
>
{resolveLocalizedResource(tool, $i18n.language)}
</div>
{#if tool.write_access}
<a
href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{resolveLocalizedResource(tool, $i18n.language)}</a
>
{:else}
<span
class="block truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
>{resolveLocalizedResource(tool, $i18n.language)}</span
>
{/if}
</Tooltip>
{#if tool?.meta?.manifest?.version}

21
src/routes/(app)/automations/+page.svelte
View file

@ -544,30 +544,23 @@
<div class="gap-y-0.5 grid my-1">
{#each automations as automation (automation.id)}
<div
role="button"
tabindex="0"
aria-label={$i18n.t('Open automation')}
role="presentation"
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
on:click={() => {
on:click={(e) => {
if (e.target instanceof Element && e.target.closest('a')) return;
goto(`/automations/${automation.id}`);
}}
on:keydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
goto(`/automations/${automation.id}`);
}
}}
>
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
<Tooltip content={automation.name} className="min-w-0" placement="top-start">
<div
class="truncate text-[0.8125rem] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
<a
href={`/automations/${automation.id}`}
class="focus-ring block truncate rounded text-[0.8125rem] leading-5 text-gray-800 group-hover:underline focus-visible:underline dark:text-gray-200"
>{automation.name}</a
>
{automation.name}
</div>
</Tooltip>
<Tooltip