Keyboard test for the tabs pattern
user.tab() follows the real Tab order, so it proves roving tabindex works: from the tab list, the next Tab skips the other tabs and goes to the panel. {End}{ArrowRight} presses two keys in one call.
Test accessibility in layers: role-based Testing Library queries that fail when names and roles are missing, automated axe scans, keyboard-only walkthroughs, real screen reader checks, and checks for reduced motion and colour contrast.
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.
Write a test (using the tiny test helper style) that checks a Modal returns focus to its opener when closed.
Write a useReducedMotion-aware Toast that slides in normally and just appears when the user prefers reduced motion.
Explain it without notes
How do Testing Library's role queries act as accessibility checks?
What can automated tools like axe catch, and what can't they?
Describe a keyboard-only test pass. What are you looking for?
How do you respect reduced motion in a React app, and what contrast ratios does WCAG AA require?
Preview
Console
Nothing logged yet.Expected console output
✓ Tab lands on the selected tab
✓ ArrowRight selects and focuses Pro
✓ End then ArrowRight wraps to Free
✓ the next Tab goes to the panel
✓ only one tab is in the Tab order