Popover

A lightweight contextual panel that reveals additional information when a trigger is activated. Closes on Escape or clicking outside.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the trigger button.
`Enter / Space`	Opens or closes the popover panel.
`Escape`	Closes an open popover.

Attribute / Property	Value / Behaviour
`aria-expanded (trigger)`	"true" when the panel is open, "false" when closed.
`aria-haspopup (trigger)`	"true" — communicates that the button controls a popup.
`role="tooltip" (panel)`	Marks the panel as a tooltip role region.
`aria-hidden (panel)`	"true" when the panel is closed so its content is hidden from the accessibility tree.

✓

1.4.3 Contrast (Minimum) — AAPass

Panel text uses --diwa-text-primary and foreground colour tokens; meets the 4.5:1 minimum contrast ratio in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The panel border (--diwa-border) has ≥ 3:1 contrast against the adjacent surface background.

✓

2.1.1 Keyboard — APass

The trigger button is keyboard-operable. Escape closes an open popover and returns focus to the trigger.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the trigger button via :focus-visible.

✓

4.1.2 Name, Role, Value — APass

aria-expanded, aria-haspopup, role="tooltip", and aria-hidden are all managed automatically by the component.

Custom trigger — when using the button slot with a custom element, ensure it is keyboard focusable and has a descriptive accessible name.
Focus management — focus does not move into the panel on open. If the panel contains interactive content, consider a modal instead.