Role and semantics
Section titled “Role and semantics”InfoPopover is a toggletip: an IconButton named by label and a panel with role="dialog" through Base UI Popover. The panel is named by its title, or by the button’s name when there is no title. The button carries aria-expanded.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter / Space | Opens or closes the panel. |
| Escape | Closes the panel; focus returns to the button. |
On open, focus moves to a link in the panel, otherwise to the panel itself, so the screen reader reads the explanation at once. On close, focus returns to the button.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Button | “About the field label, button, collapsed” |
| Opening | “Field label, dialog”, then the explanation |
Contrast
Section titled “Contrast”The icon in color-icon-default reaches at least 3:1 and the text at least 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How InfoPopover meets it | What product teams do |
|---|---|---|
| 1.4.13 Content on hover or focus | Opens on press and closes with Escape. | Nothing. |
| 2.5.8 Target size | The button is 32 px. | Nothing. |
| 2.5.3 Label in name | The button has no visible text; its name comes from label. |
Name it after what it explains. |
| 4.1.2 Name, role, value | Button name and aria-expanded; panel name. |
Nothing. |