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.