From c3ee1f807ab19f001fa8312a755db794aaed0d7b Mon Sep 17 00:00:00 2001
From: Dallas Hoffman <dallashoff@gmail.com>
Date: Fri, 22 Sep 2023 00:07:38 -0400
Subject: [PATCH] Improve NoteTags component semantics

---
 src/lib/components/notes/note-tags.svelte | 51 ++++++++++++++++-------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/notes/note-tags.svelte b/src/lib/components/notes/note-tags.svelte
index 0e4e25c..a8daf40 100644
--- a/src/lib/components/notes/note-tags.svelte
+++ b/src/lib/components/notes/note-tags.svelte
@@ -26,23 +26,32 @@
 </script>
 
 <div class="note-tags">
-	{#each $noteTags as tag (tag.id)}
-		<div class="note-tags__tag">
-			{tag.label}
-			<Button
-				plain
-				icon
-				size="sm"
-				label="Remove tag"
-				tooltipPlacement={null}
-				on:click={() => removeTag(tag.id)}
-			>
-				<FaXmark />
-			</Button>
-		</div>
-	{/each}
+	<ul class="note-tags__tag-list" aria-label="Note tags">
+		{#each $noteTags as tag (tag.id)}
+			<li class="note-tags__tag">
+				{tag.label}
+				<Button
+					plain
+					icon
+					size="sm"
+					label="Remove tag"
+					tooltipPlacement={null}
+					on:click={() => removeTag(tag.id)}
+				>
+					<FaXmark />
+				</Button>
+			</li>
+		{/each}
+	</ul>
 	<div class="note-tags__textbox" data-tooltip="Add tag">
-		<input type="text" bind:this={textbox} bind:value={newTagLabel} on:keypress={addTag} />
+		<input
+			type="text"
+			bind:this={textbox}
+			name="newTag"
+			aria-label="New tag"
+			bind:value={newTagLabel}
+			on:keypress={addTag}
+		/>
 	</div>
 </div>
 
@@ -55,6 +64,16 @@
 		padding: 0.4rem 0.75rem;
 		border-bottom: 1px solid hsl(0 0% 0% / 0.15);
 
+		&__tag-list {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 0.3rem;
+			margin: 0;
+			padding: 0;
+			color: inherit;
+		}
+
 		&__tag,
 		&__textbox input {
 			font-size: 1rem;