Accessibility
Toggletips are revealed by clicking rather than by hovering and focusing. It's important for them to prompt screen readers to announce the information after the click event.
- Include ARIA live region.
- Use type="button" to avoid mistaking the trigger as a submit button.
- Use a describable label or aria-label on the UI-Trigger to ensure the user understands what extra information is in the Toggletip content (i.e. "More information").
Content
Toggletips may contain a variety of information, from descriptive text to interactive elements such as buttons or links.
Behaviors
Triggers
Toggletips display on:
- User click of UI trigger.
- Pressing ENTER or SPACE on a keyboard while the trigger element has focus.
Toggletips dismiss by:
- User click of the close icon (x) — optional.
- Clicking outside the popover container.
- Pressing the ESC key.
User Interactions
Toggletips are intended to house interactive elements within them. UI elements such as buttons, text links, dropdowns, etc. are able to be fully interacted with inside of the toggletip.
Scrolling
In the instance that a toggletip requires scrolling of content (e.g. with a dropdown) the header and the footer of the toggletip remain fixed with the body enabling scroll.
States
Toggletips have two states.
- Hidden — the default state of a toggletip.
- Visible — state change is triggered by ui-trigger click or keyboard enter.