mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
make taglist a list and add aria-labels
This commit is contained in:
parent
7d8fb116b6
commit
d0a114869e
@ -9,7 +9,7 @@
|
||||
export let tags = [];
|
||||
</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
|
||||
{tags}
|
||||
on:delete={(e) => {
|
||||
@ -23,4 +23,4 @@
|
||||
dispatch('add', e.detail);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ul>
|
||||
|
@ -29,6 +29,7 @@
|
||||
bind:value={tagName}
|
||||
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')}
|
||||
aria-label={$i18n.t('Add a tag')}
|
||||
list="tagOptions"
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -48,6 +49,7 @@
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
class="w-3 h-3"
|
||||
>
|
||||
<path
|
||||
|
@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
import Tooltip from '../Tooltip.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Badge from '../Badge.svelte';
|
||||
@ -10,7 +12,7 @@
|
||||
|
||||
{#each tags as tag}
|
||||
<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"
|
||||
>
|
||||
<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
|
||||
@ -23,10 +25,11 @@
|
||||
dispatch('delete', tag.name);
|
||||
}}
|
||||
type="button"
|
||||
aria-label={$i18n.t('Remove this tag from list')}
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
|
Loading…
Reference in New Issue
Block a user