foundation

Keyboard navigation and focus

Keep controls reachable, focus visible, DOM order meaningful, and custom interactions keyboard operable.

Keyboard access is a baseline requirement. Interactive elements must be reachable in logical DOM order, show visible focus, activate with expected keys, and avoid traps. Native `a`, `button`, `input`, `select`, `textarea`, `summary`, and `dialog` reduce custom focus code.

Modal dialogs should move focus inside, trap Tab until closed, and restore focus to the trigger. Skip links help bypass repetitive navigation.

On interviews: modal focus, skip links, tab order, roving `tabindex`, and why positive `tabindex` is usually a smell.

Common pitfalls: outline removed without replacement; click-only handlers; DOM order diverging from visual order.

The trade-off is visual tab order hacks versus maintainable DOM sequence — fix structure instead of positive `tabindex`.

Checklist:

Test Tab, Shift+Tab, Enter, and Space.
Keep focus visible.
Avoid `tabindex` > 0.
Manage dialog focus on open/close.