React · Exercise 6 of 6 Previous
Advanced
Milestone 6: keyboard moves, focus and announcements
Make moving cards work well from the keyboard and with a screen reader.
1) Alt + ArrowRight / Alt + ArrowLeft pressed on a card or any button inside it moves the card. 2) After any move, focus goes to the moved card's <li> in its new column (give it tabIndex={-1}). 3) An always-present <p id="announcer" role="status"> says Moved "<title>" to <column>. after each move, for example Moved "Build static components" to Done.
The app opens on /?priority=high: Build static components is in Doing and Plan the board in Done.
What Check tests
- An empty
#announcerstatus region is in the page from the start - Alt + ArrowRight on a card's button moves the card to Done
- Focus follows the card into Done
- The move is announced
- The ← button also moves, keeps focus and announces
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.