Add / Remove Items
Run locally for transcripts
๐จโ๐ผ Hooray, we've got a great solution for adding multiple images to our notes.
Users are going to love this feature.
๐ฏ Did you take the time to think about the screen reader experience of our "โ"
and "โ Image" buttons? You can use
sr-only and aria-hidden to visually
hide/show different elements for screen readers. So here's how it was
implemented in my solution:Spoiler alert!
<button
className="text-foreground-destructive absolute right-0 top-0"
{...list.remove(fields.images.name, { index })}
>
<span aria-hidden>โ</span>{' '}
<span className="sr-only">Remove image {index + 1}</span>
</button>
<Button
className="mt-3"
{...list.insert(fields.images.name, { defaultValue: {} })}
>
<span aria-hidden>โ Image</span> <span className="sr-only">Add image</span>
</Button>
๐งโโ๏ธ I'm going to make a new route and link to it from
the file for the next exercise. It'll just be
a form that takes an "email" input. Feel free to put that together if you have
extra time, or you can check my work.