SpinContainer
What component has
Roles and attributes
The following list describes roles and attributes that the component already has.
| Element | Attribute | Usage |
|---|---|---|
SpinContainer.Content | inert | Indicates that the content is unavailable for the user. |
Read also: Spin A11y.
Considerations for developers
Make sure the user is aware that loading has started or ended. There are two ways to do that, depending on the user flow:
- If the
SpinContainerappears on top or instead of the last focused element, such as when submitting a form, focus theOverlayor its parent when the loading starts, and focus the content when it's loaded. Make sure focus is invisible if the focused element is noninteractive. - In other cases, moving focus is usually undesirable, so add
role="status"andaria-live="polite"attributes to theSpinContainer.
Resources
Read more about ARIA live regions on MDN.
Other recommendations
Find more accessibility recommendations in the common Accessibility guide.