Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Popover
  3. Accessibility
  4. Keyboard Support

Popover

Keyboard Support

Accessible popovers ensure all users can discover, open, interact with, and close popover content effectively. When using Popover, follow these best practices.
Keyboard Support
Popovers provide comprehensive keyboard navigation.
Opening and Closing
Users can open and close popovers using standard keyboard patterns.
  • Enter or Space: Opens the popover when trigger is focused
  • Escape: Closes the popover
  • Tab: Moves focus within the popover content
  • Shift + Tab: Moves focus backward within the popover
Focus Management
Focus moves appropriately when popovers open and close.
  • Focus moves to the first focusable element in the popover when it opens
  • Use onOpenAutoFocus to customize focus behavior
  • Focus returns to the trigger when the popover closes
  • Focus is trapped within the popover while it's open
Focus Trapping
Focus is trapped within the popover when it's open.
Users can navigate between interactive elements within the popover using Tab and Shift+Tab, but cannot tab outside the popover until it closes.
ARIA Attributes
Popovers use proper ARIA attributes to communicate structure and state.
Popover Role
Popovers use appropriate ARIA roles.
Popovers use role="dialog" or role="tooltip" (handled by Radix UI) to identify the floating content, and the trigger is associated with the content.
Accessibility Labels
Ensure popovers are properly labeled.
Triggers should have clear labels that describe what the popover contains, especially when using icon-only triggers.
Previous
Popover / API and Development
Next
Accessibility / Screen Reader Support
On this page
Keyboard Support
Opening and Closing
Focus Management
Focus Trapping
ARIA Attributes
Popover Role
Accessibility Labels