Toggletip
Carbon already incorporates accessibility into the toggletip component. Designers only need to indicate the toggletip’s content.
What Carbon provides
No annotations are needed for keyboard operation, since Carbon bakes in the interaction.
Keyboard interactions
Toggletips use an information icon button for the trigger. When these buttons have focus, pressing Enter or Space toggles the toggletip open and closed (while focus remains on the trigger). If the toggletip contains interactive elements, pressing Tab will move the focus from the trigger into the components in an open toggletip. The toggletip can be closed by pressing Esc (which puts focus back on the trigger) or by moving focus away from the toggletip and its trigger.
The information button ('i') that triggers the toggletip is in the page tab order, as are interactive elements inside an open toggletip.
Toggletips appear on activation of the information button ('i'), and disappear by either activating the icon again, pressing Esc or moving focus to another element.
Design recommendations
Annotate the text for the toggletip
Every toggletip should be annotated by the designer so the developer knows what content it has. See Usage for information on the length and styling of toggletip content.
Specify the content that will appear in the toggletip.
Development considerations
Keep these considerations in mind if you are modifying Carbon or creating a custom component.
- Button trigger uses
aria-expandedto set toggletip visibility andaria-controlsto handle navigation to the content. - See the toggletip pattern in the ARIA authoring practices for more considerations.