Popover

Structure

The Popover dialog container uses an HTML <div> with the dialog ARIA role to communicate its purpose to assistive technology. The Popover is rendered inside a portal so it sits outside the main document flow, preventing interference with page layout.

The Popover uses Floating UI for positioning, interactions, and accessibility. Floating UI's useRole assigns the dialog role and related ARIA attributes, useClick/useHover/useFocus manage trigger behavior, useDismiss handles dismissal with the Escape key and outside clicks, and FloatingFocusManager manages focus when the Popover is closed.

ARIA

table

Element	Attribute	Description
Drag handle	aria-grabbed	Set to true while the Popover is actively being dragged via mouse or keyboard. Only present when the Popover is draggable.
Drag handle	aria-label	Provides instruction on how to use the drag handle with a keyboard.
Popover content	role="dialog"	Identifies the floating container as a dialog.
Trigger	aria-expanded	Set to true when the Popover is open, false when closed.
Trigger	aria-haspopup	Set to "dialog" to indicate the trigger opens a dialog.

Focus trapping

When enabled, focus trapping confines keyboard focus to elements within the Popover until it's dismissed. This prevents the user from being forced to cycle through all page elements before landing back in the Popover.

The first focusable element within the Popover receives focus first. If necessary, another element may be targeted as the first focusable element with the initialFocus. When the Popover closes, focus returns to its trigger element.

Visually hidden dismiss buttons can be rendered before and after the Popover content for screen reader users.

Keyboard

Popover

table

Key	Function
Enter/Space	Activates the trigger to open or close the Popover.
Escape	Closes the Popover and returns focus to the trigger.
Shift+Tab	Moves focus to the previous focusable element. When focus trapping is enabled, wraps from the first focusable element to the last within the Popover.
Tab	Moves focus to the next focusable element. When focus trapping is enabled, wraps from the last focusable element back to the first within the Popover.

Drag handle

table

Key	Function
Space	Toggles keyboard drag mode on the drag handle.
Escape	Exits keyboard drag mode without closing the Popover.
←→↑↓	Moves the Popover by 1px in the corresponding direction while keyboard drag mode is active.
Shift+←→↑↓	Moves the Popover by 10px in the corresponding direction while keyboard drag mode is active.