fix(loader): add aria attributes for screen reader accessibility#46
Open
msmps wants to merge 3 commits intocloudflare:mainfrom
Open
fix(loader): add aria attributes for screen reader accessibility#46msmps wants to merge 3 commits intocloudflare:mainfrom
msmps wants to merge 3 commits intocloudflare:mainfrom
Conversation
commit: |
Contributor
Docs PreviewCommit: |
mattrothenberg
requested changes
Feb 26, 2026
| className={className} | ||
| style={{ height: sizeValue, width: sizeValue }} | ||
| role="status" | ||
| aria-label="Loading" |
Collaborator
There was a problem hiding this comment.
Can we make this a prop with a default value of "loading" so that we can ultimately pass a translated string down where we consume this?
Contributor
Visual Regression Report2 screenshot(s) with visual changes: Loader / Default Size34 px (0.01%) changed
Loader / Custom Size40 px (0.01%) changed
Generated by Kumo Visual Regression |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
role="status"andaria-label="Loading"to the Loader SVG componentProblem
The Loader component renders an SVG spinner without any accessibility attributes, making it completely invisible to screen readers. When used as a loading indicator (e.g., in buttons, page transitions, async operations), assistive technology users receive no indication that content is loading.
Screen readers skip over the Loader entirely - users hear nothing.
Solution
Add two ARIA attributes to the SVG element:
role="status"- Indicates this is a live region for status updatesaria-label="Loading"- Provides the accessible name announced by screen readersScreen readers announce "Loading, status" when the Loader is present.
Testing
Verified with VoiceOver on macOS: