React · Exercise 1 of 6Next
Beginner
Turn clickable divs into buttons
This notes list uses <div onClick> for its Delete controls, so keyboard and screen reader users can't delete anything.
Make every Delete control a real <button type="button">. Keep the visible text Delete, and give each button an aria-label naming its note, for example Delete Buy milk, so screen reader users know which note each button deletes.
Clicking a button must still remove its note.
What Check tests
- Each note has a real
<button> - The buttons still show the text
Delete - Each button's
aria-labelnames its note - The buttons can take keyboard focus
- No
divhas anonClickany more - Clicking a button still deletes its note
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.