Popover
An interactive floating panel triggered by a button
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsaria-expanded on the trigger
The trigger button must reflect the open state via aria-expanded="true/false".
aria-haspopup and aria-controls on trigger
Use aria-haspopup="dialog" (or "true") and aria-controls referencing the popover id.
Focus management on open
Move focus to the first focusable element inside the popover when it opens.
Close with Escape
Pressing Escape must close the popover and return focus to the trigger.
Use dialog role inside popover
If the popover contains interactive controls, use role="dialog" with an accessible name.
Close on background click
Clicking outside the popover should close it.
Trap focus within popover
If the popover contains multiple focusable elements, consider implementing a focus trap.
Do not open popover on hover only
Popovers must also be accessible via keyboard (button click).
Do not put critical information in popover only
Important content placed only in a popover may be missed by users who cannot activate it.
Additional checks
Connect trigger with Popover anchorEl
Use anchorEl to associate the popover with its trigger element for proper ARIA relationships.
Code sample
Implementation notes
- –MUI Popover automatically closes on Escape key and outside clicks.
- –Connect the trigger and popover via aria-describedby.
- –Focus management inside the popover must be implemented manually.