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>
</div>
<Button
className="mt-3"
{...list.insert(fields.images.name, { defaultValue: {} })}
>
<span aria-hidden>➕ Image</span>{' '}
<span className="sr-only">Add image</span>
🧝♂️ 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.