Milestone 5: keyboard moves, focus that follows, announcements, memo
Tab to a card's → button and press Enter, or press Alt + → / Alt + ←: the card moves and keeps focus (blue ring). A hidden role="status" region announces each move. Tick Server is down and move: focus follows the card back.
Milestone 5: make every action work from the keyboard, keep focus on a card when it moves, announce changes to screen readers, add memo only where render counts show wasted work, and prove the behaviour with Testing Library tests.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make Escape in a card's edit box return focus to that card's ✎ button.
Write a test that the Add button doesn't add an empty task.
Explain it without notes
Why does focus get lost when a card moves to another column, and how do you fix it?
What is a live region and how should you render one in React?
When would you add memo to TaskCard, and what makes it work?
How do role-based queries in tests double as accessibility checks?
Preview
Console
Nothing logged yet.