Roving tabindex: one Tab stop, arrow keys inside
Focus moves for real (document.activeElement). The list stops at both ends instead of wrapping. The Tab press is not handled, so defaultPrevented stays false.
People who cannot use a mouse need a way to walk through a chart's data with the keyboard. Make the chart one Tab stop, move with the arrow keys, show where focus is, and say each value aloud with a slider's text or a live region.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a three-item toolbar of buttons a roving tabindex. Which attribute changes on which keys?
Add Page Down to the first example, moving three rows at once. Where in the code?
Explain it without notes
What is a roving tabindex and why use it?
Which keys should a chart handle, and which must it leave alone?
Why is swallowing Tab a failure?
When do you use a live region instead of moving focus?
What is aria-valuetext for?
Preview
Console
Nothing logged yet.Expected console output
Tab stops, every row: 8
Tab stops, roving: 1
ArrowDown -> focus: Quay | default prevented: true | stops: 1
ArrowDown -> focus: Clock Tower | default prevented: true | stops: 1
End -> focus: Campus | default prevented: true | stops: 1
ArrowDown -> focus: Campus | default prevented: true | stops: 1
Home -> focus: Lantern | default prevented: true | stops: 1
Tab -> focus: Lantern | default prevented: false | stops: 1