The Spinner component is, at first glance, a convenient way to render a loading state:
<Box>
{isLoading ? <Spinner /> : content}
</Box>This appears straightforward, but in reality this is a bad idea because it's completely inaccessible. Spinner has no label by default, so the box will simply appear empty to screen readers.
The US Government CMS design system renders Spinner as a status with hidden "Loading" text. I think we probably should do the same by default, rendering it like so (hiding the SVG to avoid duplication):
<Box role="status">
<VisuallyHidden>Loading</VisuallyHidden>
<SpinnerSvg aria-hidden />
</Box>
This would make the accessible path much easier to follow.
The
Spinnercomponent is, at first glance, a convenient way to render a loading state:This appears straightforward, but in reality this is a bad idea because it's completely inaccessible.
Spinnerhas no label by default, so the box will simply appear empty to screen readers.The US Government CMS design system renders
Spinneras astatuswith hidden "Loading" text. I think we probably should do the same by default, rendering it like so (hiding the SVG to avoid duplication):This would make the accessible path much easier to follow.