Overlays must capture focus and return it on close

What it is

While a dialog, popup menu, or full-screen overlay is open, keyboard focus should stay inside the overlay: Tab cycles among its controls and must not land on the page underneath. On close, focus must return to the control that opened it, not to the start of the document or some invisible node. Capture stops focus escaping out of view; restoration answers “where do I continue after I come back?”

Why it happens

An overlay visually covers the UI beneath. If the focus sequence still includes covered buttons, keystrokes go to unseen controls—submit, delete, or type into a field that is blocked. Capture temporarily replaces the sequence with the overlay’s short list; Escape or an explicit close then tears that list down. Restoration depends on a reference to the trigger stored at open: without it, focus after close falls on body or the first focusable element, and the user must Tab back to where they were. Nested overlays (a menu on a dialog) need a stack, not one global “current focus”: closing the inner layer should return to the outer overlay, not straight to the page. Failed capture and failed restoration are different failures—“focus thrashing underneath” versus “I cannot find myself after close.”

Studying it

Keyboard-only, open the overlay, walk its internals, try to Tab out, then close. Record whether focus left the overlay and whether it landed on the trigger after close. Independent variables include overlay type (modal, modeless, menu), nesting depth, and how it opened (button versus automatic); dependent measures include escapes, restoration accuracy, and reorientation time after close. Dismissing via a mouse click on the mask hides restoration failures.

Where it stops holding

Modeless panels (sidebars, inspectors) usually should not trap focus, or the rest of the page’s keyboard path is cut. They need focus moved in on open and restored on close, without intercepting Tab toward the page. Auto-popped ads or permission prompts that trap steal keystrokes from the field the user was in. Tooltips and display-only bubbles should not enter the focus sequence at all, so capture does not arise.

Applying it

• On opening a modal, move focus to its first meaningful control, cycle Tab inside it, and route Escape and the close button through the same close path.
• On close, set focus back to the trigger; if the trigger is gone, to the logical next place, not the start of the document.
• Walk nested overlays with the keyboard: after the inner layer closes, focus should remain inside the outer; only closing the outer returns to the page trigger.

Related

• Same group: C6.05.1 Tab order should match visual reading order · C6.05.2 Focus must be visible · C6.05.4 Hidden elements must not remain in the focus sequence
• Adjacent: C6.22 Focus order and keyboard navigation · C6.06 Soft keyboards and screen occupancy
• Search: focus trap · focus restoration · modal dialog