Accessible loading button variant
Problem
The loading button is a disabled
button with the loading spinner visible, but this doesn’t communicate the state of things for screen reader users since there is no aria-live
and having the button disabled takes it out of the focus order.
Proposal
- Create a separate loading button variant that doesn’t rely on the disabled button’s CSS properties or semantics.
- Consider applying the
.active
class or an.is-loading
class while the loading occurs, but don’t represent the button as disabled.
- Consider applying the
- The button should still be able to receive focus when in a loading state.
- The button should indicate its loading state both visually and to screen readers.
- Additional clicks are intercepted or prevented while in a loading state.
This is related to WCAG 2.1 SC 4.1.3 Status Messages
The intent of this Success Criterion is to make users aware of important changes in content that are not given focus, and to do so in a way that doesn't unnecessarily interrupt their work.
The W3C defines a status message as a “change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors.” (Source)
Tenon-IU’s SpinnerButton is a good example, although I think we could handle the screen reader text a little differently. Here’s another code example of how this could be approached.