Accessibility
Roles, keyboard support, and motion.
Roles and labels
The popover doesn't set a role, because the right one depends on what you render. Use popoverProps to add one:
<HighlightPopover
renderPopover={renderPopover}
popoverProps={{ role: "toolbar", "aria-label": "Text actions" }}
>
{children}
</HighlightPopover>| Content | Suggested role |
|---|---|
| A row of buttons | toolbar |
| A form or several controls | dialog, with aria-label |
| Text only, nothing interactive | tooltip |
Keyboard
- Keyboard selections, such as Shift with the arrow keys, show the popover.
- Escape hides the popover.
The popover doesn't move focus. If keyboard users need its controls, add a way to reach them, such as a keyboard shortcut that focuses the first button.
Motion
The component doesn't animate. If you add an entrance animation, reduce or remove it under prefers-reduced-motion.