Problem description
Spinner is a UI component to indicate the loading state of certain actions inside application such as Initialization, Async request and etc.
The spinner component is simply a container with screen reader text in it. The animation is done by CSS which is overridable by developers.
Accessibility consideration:
Add role="alert" & aria-live=”assertive" on the spinner container element.
Screen reader text should be changed with Javascript once action is complete and states become loaded.
The element with the role & aria-live attributes needs to exist in the DOM before the spinner is required. The change or addition of content inside that element is what triggers the screen reader notification.
Problem description
Spinner is a UI component to indicate the loading state of certain actions inside application such as Initialization, Async request and etc.
Proposed solution
https://codepen.io/xucongzhe/pen/WNvdZWX
The spinner component is simply a container with screen reader text in it. The animation is done by CSS which is overridable by developers.
Accessibility consideration:
Alternatives considered
https://getbootstrap.com/docs/4.4/components/spinners/ and https://codepen.io/stuartjnelson/pen/xWyLGR share simillar markups, the later one provides better accessibility.
Additional context
Feature Review Checklist: