colin
/
sticky-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve NoteTags component semantics

This commit is contained in:
Dallas Hoffman 2023-09-22 00:07:38 -04:00
parent 68ac26e991
commit c3ee1f807a
No known key found for this signature in database
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/notes/note-tags.svelte
View File

@ -26,8 +26,9 @@
</script> </script>
<div class="note-tags"> <div class="note-tags">
<ul class="note-tags__tag-list" aria-label="Note tags">
{#each $noteTags as tag (tag.id)} {#each $noteTags as tag (tag.id)}
<div class="note-tags__tag"> <li class="note-tags__tag">
{tag.label} {tag.label}
<Button <Button
plain plain
@ -39,10 +40,18 @@
> >
<FaXmark /> <FaXmark />
</Button> </Button>
</div> </li>
{/each} {/each}
</ul>
<div class="note-tags__textbox" data-tooltip="Add tag"> <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>
</div> </div>
@ -55,6 +64,16 @@
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border-bottom: 1px solid hsl(0 0% 0% / 0.15); 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, &__tag,
&__textbox input { &__textbox input {
font-size: 1rem; font-size: 1rem;