Focus Order Inspector
Split audit view pairing a dialog blueprint with numbered focus markers beside a stop list showing selectors, roles, and flagged order issues.
Split audit view pairing a dialog blueprint with numbered focus markers beside a stop list showing selectors, roles, and flagged order issues.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Focus Order Inspector pairs a blueprint of the Acme invite member dialog with the tab sequence captured from it. Numbered markers sit on every focusable element in the mockup, and the matching ruled list names each stop with its selector, ARIA role, and a pass or issue badge. Two stops are flagged: the close button jumps to the front because of a positive tabindex, and the copy invite link is focused last even though it sits above the footer buttons.
Stops are one typed array, so the summary chip, the markers, and the list always agree. Flagged markers use the destructive token in both panels, which makes scanning from mockup to explanation immediate.
Reach for this block in an internal accessibility tooling area or an audit report, wired to the focus snapshot your test runner captures. Keep one dialog or region per inspector so the marker count stays readable.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the dialog tab order audit. Other inspector shapes:
Tip: capture the order with a real keyboard pass, not from DOM order; tabindex and CSS order can make the two disagree.