75 Focus Restoration. 75 of 95.
75/FOCUS MANAGEMENT/75 of 95
Focus Restoration
Closing a dialog should return focus to where you were.
The problem
When a modal closes, focus often lands on the body or nowhere at all, forcing keyboard users to re-find the control that opened it.
The solution
The trigger element regains focus so keyboard flow continues naturally.
Experiment
Play with the values
0ms
How it works
- The element that opened the dialog is stored before focus moves.
- Focus is moved into the modal so keyboard users land inside it.
- Dismissing the dialog is the moment focus has to go back.
- Focus returns to the stored trigger, not to the top of the page.
- Keyboard flow continues from where the user was.
Seen in
Confirm dialogs
After confirming or cancelling, Tab returns to the action that opened the dialog.
Settings panels
Closing a sheet restores focus to the gear or row that launched it.
Form modals
Keyboard users resume at the edit button instead of the page top.
Menus & popovers
Dismissing a menu returns focus to its trigger for the next action.