Skip to content

SpinContainer

What component has

Roles and attributes

The following list describes roles and attributes that the component already has.

Roles & attributes
ElementAttributeUsage
SpinContainer.ContentinertIndicates 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:

  1. If the SpinContainer appears on top or instead of the last focused element, such as when submitting a form, focus the Overlay or 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.
  2. In other cases, moving focus is usually undesirable, so add role="status" and aria-live="polite" attributes to the SpinContainer.

Resources

Read more about ARIA live regions on MDN.

Other recommendations

Find more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.