Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Modal
  3. Accessibility
  4. Focus Management

Dialog

Focus Management

Accessible modals ensure all users can understand, navigate, and interact with dialog content effectively. When using Dialog, follow these best practices.
Focus Management
Proper focus management is critical for modal accessibility.
Focus Trapping
Focus is trapped within the modal when it's open.
Users can navigate between interactive elements within the modal using Tab and Shift+Tab, but cannot tab outside the modal.
Focus Restoration
Focus returns to the element that opened the modal when it closes.
Focus automatically returns to the trigger element when the modal closes, allowing users to continue their workflow.
Initial Focus
Focus moves to the first focusable element when the modal opens.
Focus moves to the confirm button or first focusable element (like an input with autoFocus) when the modal opens.
Keyboard Support
Modals support comprehensive keyboard navigation.
Opening and Closing
Users can interact with modals using standard keyboard patterns.
  • Escape: Closes the modal (when noDismiss is false)
  • Tab: Moves focus to next interactive element
  • Shift + Tab: Moves focus to previous interactive element
  • Enter or Space: Activates focused button
Button Navigation
Navigate modal buttons efficiently.
  • Tab: Moves from cancel button to confirm button
  • Shift + Tab: Moves from confirm button to cancel button
  • Enter or Space: Activates the focused button
Previous
Modal / API and Development
Next
Accessibility / ARIA Attributes
On this page
Focus Management
Focus Trapping
Focus Restoration
Initial Focus
Keyboard Support
Opening and Closing
Button Navigation