make taglist a list and add aria-labels

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

View File

@ -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>

View File

@ -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

View File

@ -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}