The board's tests, running live with Testing Library
Real Testing Library and user-event against the board's behaviour. getByRole("region", { name: "Done" }) works only because each column is a section labelled by its heading: the test doubles as an accessibility check.
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.Expected console output
✓ the reducer moves a task (a plain function test)
✓ adds a typed task to To do
✓ the move button moves the card and announces it
✓ Alt+ArrowRight moves the focused card and focus follows it