131
focus management
When a dialog opens, focus goes inside it. When it closes, focus returns. Tab does not escape to the page underneath.
What is focus management?
Focus management moves keyboard focus on purpose: into a dialog, back to the trigger, to the new error, to the heading after a route change. A focus trap keeps tab inside a modal. Missing it means keyboard users are lost and screen-reader users are not told what changed.
Why does focus management matter when vibe coding?
Models draw a modal as a positioned div. Focus stays on the button that opened it, or tab walks the page behind. Name trap and restore.
How do you do focus management?
On open, focus the dialog or the first field. Trap tab. On close, restore the trigger. Move focus to the error summary on invalid submit. Do not `outline: none` without a visible replacement.
How do you ask a model for focus management?
Manage focus for (dialog). Move focus inside on open, trap tab, restore the trigger on close. Escape closes. Do not leave focus on the page behind. Keep a visible focus ring.
What goes wrong with focus management?
Autofocus on every render so the cursor jumps back to the first field while the user is typing. Focus once, on open.