Add / Remove Items

Loading "Interactive Image Management (🏁 solution)"

Interactive Image Management (🏁 solution)

👨‍💼 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!

Open in solution

>
	<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>

Open in solution

</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

/signup

route and link to it from the

app/root.tsx

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.

05. Complex Structures/03. Add / Remove Items (🏁 solution)

Add / Remove Items