feat(loader): remove progressbar role and add loaderLabel prop #7176
Conversation
This file contains 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
nuria1110
force-pushed
the
FE-6820
branch
2 times, most recently
from
26ea9cd to
0407695
Compare
edleeks87
previously approved these changes
Jan 24, 2025
src/components/loader/loader.mdx
Outdated
|
|
||
| Please note that ARIA live regions provide a means for conveying dynamic updates to users who rely on assistive technologies like screen readers. | ||
| These updates in this case include changes to the button's content. By incorporating live regions permanently into the DOM, we can ensure that users are consistently informed of relevant changes as they occur. | ||
| Note that `Loader` has a role of "status", meaning it has an implicit `aria-live="polite"` and will be announced by screen readers. |
| <Button | ||
| m={2} | ||
| buttonType="primary" | ||
| aria-label={ariaContent} |
There was a problem hiding this comment.
Question (non-blocking): Does this need an aria-label at all when isLoading is false as there's text content at that point?
const ariaContent = isLoading ? "Loading" : undefined;
Parsium
reviewed
Jan 24, 2025
nuria1110
changed the title
Parsium
reviewed
Jan 24, 2025
|
|
||
| ### Conditional Rendering | ||
|
|
||
| In most cases, Loaders are conditionally rendered on the page and are then replaced by content. |
There was a problem hiding this comment.
praise: this is much simpler now 👍🏼
Removes role of progressbar in Loader as this fails WCAG 1.3.1. Adds loaderLabel prop to provide a visually hidden label for the component. Deprecates the 'aria-label' prop in favour of the new label prop. fix #6956
Parsium
approved these changes
Jan 27, 2025
edleeks87
approved these changes
Jan 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
fix #6956
Proposed behaviour
aria-labelprop.loaderLabelprop to set a visually hidden label for the component instead of an aria-label.Current behaviour
Loaderhas role of "progressbar".Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions