Toggletip
Back to complex components
A toggletip is a tooltip that is toggled open and closed, as opposed to using the hover state. Toggletips must be checked to see if they indicate focus, and be keyboard and screen reader accessible.
WHEN I click on a closed toggletip icon
THEN the toggletip opens
AND its content is read via screen reader.
WHEN I am navigating using a keyboard
AND I tab on a toggletip icon
THEN I see a visual indicator
AND the focus indicator passes WCAG rule
AND the label is read via screen reader
WHEN I am navigating using a keyboard
AND I tab on a closed toggletip icon
AND I press the spacebar OR enter key
THEN the toggletip opens
AND I press the spacebar OR enter key again
THEN the toggletip closes
WHEN I am navigating using a keyboard
AND I tab on an open toggletip icon
AND I press the tab key
THEN focus changes to the close button inside the toggletip
AND focus is NOT trapped to within the toggletip
,
THEN the toggletip opens
AND its content is read via screen reader.
WHEN I am navigating using a keyboard
AND I tab on a toggletip icon
THEN I see a visual indicator
AND the focus indicator passes WCAG rule
AND the label is read via screen reader
WHEN I am navigating using a keyboard
AND I tab on a closed toggletip icon
AND I press the spacebar OR enter key
THEN the toggletip opens
AND I press the spacebar OR enter key again
THEN the toggletip closes
WHEN I am navigating using a keyboard
AND I tab on an open toggletip icon
AND I press the tab key
THEN focus changes to the close button inside the toggletip
AND focus is NOT trapped to within the toggletip
,
More Information
Aria-label is used to identify the toggletip icon to a screen reader. In our implementation it has been hard-coded as "more info". The close button has an aria-label of "close more info".