OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

make taglist a list and add aria-labels

Browse Source
This commit is contained in:
Sine Jespersen 2025-06-13 14:03:35 +02:00
parent 7d8fb116b6
commit d0a114869e
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/common/Tags.svelte
View File

@ -9,7 +9,7 @@
export let tags = []; export let tags = [];
</script> </script>
<div class="flex flex-row flex-wrap gap-1 line-clamp-1"> <ul class="flex flex-row flex-wrap gap-1 line-clamp-1">
<TagList <TagList
{tags} {tags}
on:delete={(e) => { on:delete={(e) => {
@ -23,4 +23,4 @@
dispatch('add', e.detail); dispatch('add', e.detail);
}} }}
/> />
</div> </ul>

2
src/lib/components/common/Tags/TagInput.svelte
View File

@ -29,6 +29,7 @@
bind:value={tagName} bind:value={tagName}
class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-hidden line-clamp-1 w-[6.5rem]" class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-hidden line-clamp-1 w-[6.5rem]"
placeholder={$i18n.t('Add a tag')} placeholder={$i18n.t('Add a tag')}
aria-label={$i18n.t('Add a tag')}
list="tagOptions" list="tagOptions"
on:keydown={(event) => { on:keydown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
@ -48,6 +49,7 @@
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="currentColor" fill="currentColor"
stroke-width="2" stroke-width="2"
aria-hidden="true"
class="w-3 h-3" class="w-3 h-3"
> >
<path <path

7
src/lib/components/common/Tags/TagList.svelte
View File

@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import Tooltip from '../Tooltip.svelte'; import Tooltip from '../Tooltip.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import Badge from '../Badge.svelte'; import Badge from '../Badge.svelte';
@ -10,7 +12,7 @@
{#each tags as tag} {#each tags as tag}
<Tooltip content={tag.name}> <Tooltip content={tag.name}>
<div <li
class="relative group/tags px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer" class="relative group/tags px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
> >
<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit"> <div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
@ -23,10 +25,11 @@
dispatch('delete', tag.name); dispatch('delete', tag.name);
}} }}
type="button" type="button"
aria-label={$i18n.t('Remove this tag from list')}
> >
<XMark className="size-3" strokeWidth="2.5" /> <XMark className="size-3" strokeWidth="2.5" />
</button> </button>
</div> </div>
</div> </li>
</Tooltip> </Tooltip>
{/each} {/each}