Components

Popover

A non-modal panel with interactive content, anchored to the button that opens it.

Storybook: Storybook
Source: Source

Role and semantics

Popover draws a non-modal panel with role="dialog" through Base UI Popover. The title is linked with aria-labelledby and the description with aria-describedby. The trigger carries aria-haspopup="dialog", aria-expanded and aria-controls.

Keyboard

Key	Behaviour
Enter / Space	Opens or closes the panel from the trigger.
Tab	Moves through the panel; leaving it closes the panel.
Escape	Closes the panel; focus returns to the trigger.

Focus

On open, focus moves to the first focusable element in the panel.
On close, focus returns to the trigger.
With modal focus is trapped in the panel.

Example	Output
Trigger	“Edit view, button, collapsed”
Opening	“View, dialog, Choose the columns to show.”

Contrast

Text on color-surface-raised reaches at least 4.5:1. The panel stands out by its border and shadow.

WCAG 2.2

Criterion	How Popover meets it	What product teams do
1.4.10 Reflow	The panel never exceeds the viewport and flips when there is no room.	Do not put wide tables in it.
1.4.13 Content on hover or focus	Opens on press only; Escape closes it.	Nothing.
2.4.3 Focus order	Focus enters the panel and returns to the trigger.	Nothing.
4.1.2 Name, role, value	`aria-expanded`, name from the title.	Keep the title short and meaningful.