Improve NoteTags component semantics

src/lib/components/notes/note-tags.svelte

@@ -26,8 +26,9 @@
 </script>
 
 <div class="note-tags">
+	<ul class="note-tags__tag-list" aria-label="Note tags">
 		{#each $noteTags as tag (tag.id)}
-		<div class="note-tags__tag">
+			<li class="note-tags__tag">
 				{tag.label}
 				<Button
 					plain
@@ -39,10 +40,18 @@
 				>
 					<FaXmark />
 				</Button>
-		</div>
+			</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;