Design Principle
Dialogs change interaction context and must manage focus, background reachability, and close paths.
Principle Dialogs change interaction context and must manage focus, background reachability, and close paths.
Design action Focus the title or first key control on open; trap focus inside, return it to the trigger on close, and provide Escape/close button.
Examples Positive example: Confirmation, editing, creation, preview, and short flows temporarily cover the page. Counterexample: Keyboard focus continues into the background page after opening.
Apply when Confirmation, editing, creation, preview, and short flows temporarily cover the page. Users need to judge state, scope, risk, or next action quickly.
Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.
Agent Directive
Focus the title or first key control on open; trap focus inside, return it to the trigger on close, and provide Escape/close button.