Closing an overlay must return focus to the control that opened it
Aliases: focus restoration on dismiss · return to opener · overlay close restores focus
What it is
A dialog, menu, or popover usually takes focus when it opens. When it closes, nodes inside the overlay are hidden or torn down, and focus must return to the control that opened it. Without restoration the engine dumps the pointer on the document root or a nearby node, and keyboard users feel their way back from the top of the page; the place in the task is gone.
Restoration is to the trigger, not to “somewhere under the overlay.” The user walked in from that button or field; closing should stand them back on the same spot so the next step beside it is reachable.
Why it happens
Opening an overlay almost always moves focus; otherwise the inside cannot be used from the keyboard. On close, the node that held focus goes with the overlay. The pointer loses its attachment, and the engine picks a fallback: often body, sometimes a neighbor that happened to survive. Neither is where the user stood before entering.
The trigger is still in the underlying UI. It is the bookmark in the task. Setting focus back puts the person on the step before the overlay: the next Tab lands on the next action beside the trigger, and the screen reader continues from that button. Not setting it back is an accidental “jump elsewhere” at dismiss. Visually the overlay is gone and the page underneath remains, so it looks like a return; the assistive channel is already somewhere else.
Where it stops holding
If the trigger itself is gone (the row whose menu just deleted that row), restore-to-trigger cannot run — that is a different “where focus goes when a node is removed” problem, and there is no button to pretend still exists. A link inside the overlay that leaves the page stacks dismiss with navigation; follow the navigation rather than yanking back to a trigger on a page being left. Nested overlays restore to the control that opened the inner layer (which may still sit in the outer layer), not in one hop to the page-level opener. A non-modal popover dismissed by clicking empty page leaves the mouse pointer off the keyboard focus; keyboard focus should still restore so the next Tab does not start in a strange place.
Applying it
- On open, remember the trigger node. On every close (confirm, cancel, Escape, backdrop click), set focus back to it.
- Nested layers remember their own triggers; close one layer, restore one layer. Do not dump to the bottom of the page in one jump.
- On the spec, the landing after close is the trigger, not “just close.”
- How to check: keyboard-open a menu or dialog, finish, dismiss. The focus indicator should be back on the same opener, and the next Tab should continue beside it. Focus in the URL bar, on the page’s first link, or nowhere, means restoration did not happen.