From d0a114869e4362734fe6dadbdd4ca79f52f33166 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Fri, 13 Jun 2025 14:03:35 +0200
Subject: [PATCH] make taglist a list and add aria-labels

---
 src/lib/components/common/Tags.svelte          | 4 ++--
 src/lib/components/common/Tags/TagInput.svelte | 2 ++
 src/lib/components/common/Tags/TagList.svelte  | 7 +++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/common/Tags.svelte b/src/lib/components/common/Tags.svelte
index 0f19eed9d..6c34b72de 100644
--- a/src/lib/components/common/Tags.svelte
+++ b/src/lib/components/common/Tags.svelte
@@ -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>
diff --git a/src/lib/components/common/Tags/TagInput.svelte b/src/lib/components/common/Tags/TagInput.svelte
index a7a1a7891..b7e914803 100644
--- a/src/lib/components/common/Tags/TagInput.svelte
+++ b/src/lib/components/common/Tags/TagInput.svelte
@@ -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
diff --git a/src/lib/components/common/Tags/TagList.svelte b/src/lib/components/common/Tags/TagList.svelte
index 9751da929..f04bbcd79 100644
--- a/src/lib/components/common/Tags/TagList.svelte
+++ b/src/lib/components/common/Tags/TagList.svelte
@@ -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}