Focus Management
Last updated:
Focus movement, visible state, overlay traps, and restoring context when dialogs and menus close.
01 — Purpose
Users should always know where focus is
Focus management covers movement, visibility, traps in overlays, and restoring context when temporary UI closes.
Focus is the cursor for keyboard and many assistive tech users. When it jumps randomly, disappears behind a dialog, or fails to return after an overlay closes, people lose orientation and abandon tasks.
See modal / dialog, accessible forms, and accessible focus indicators.
02 — Principles
Predictable focus, visible state
Movement should follow user expectation — not implementation convenience.
- focus moves intentionally on open, close, submit, and major state change
- focus is always visible — high-contrast ring or equivalent
- minor updates use live regions — do not move focus for every DOM twitch
03 — Overlays
Traps, open, and restore
While a modal is open, focus cycles inside it — and Escape always offers a way out.
- prefer
<dialog>where supported — focus behaviour built in - trap focus only while overlay is open and modal in behaviour
- Escape closes and restores focus to the trigger — every time
- inert or aria-hidden on background content — not only visually dimmed
04 — Practice
Choreograph the big moments
Open, act, close, restore — the same choreography every time.
- on dialog open: focus first focusable or heading container
- on form error: move focus to summary or first invalid field — once, not per keystroke
- on SPA route change: move focus to
h1ormain - before removing focused element from DOM: move focus to a logical neighbour
05 — Avoid
Focus failures
A broken trap is worse than no trap.
- trapping with no Escape, close button, or cancel path
- focus remaining on content behind an open modal
- auto-focus on load to promo banners users did not request
06 — Close
Document overlay rules once
Inconsistent modal behaviour across the product is a common accessibility bug.
Test every overlay: open from a known button, cycle focus twice, close with Escape, confirm focus returns to that button.