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. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
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.