Overview
Usage
- Contextual workflows or messaging
- Focused tasks
- Error messaging
- Onboarding
Sample
Accessibility
Focus order
The Modal's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Modal will recieve keyboard focus, such as the component's close button (default).
Keyboard focus
It is strongly recommended to have focusable elements cycle through Modal where focus is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element and focus is false, focus will cycle to the first element. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element and focus is false, focus will cycle to the last element. |
Esc | If escape is false, closes the component. |