Repository navigation
fix(example): add accessible names to icon-only buttons on IconButton screen (#5182) - #5195
Open
EnesKartal wants to merge 1 commit into
Open
EnesKartal wants to merge 1 commit into
EnesKartal wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
|
Found potential problems with the pull request:
|
This branch has not been deployed
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
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.
Motivation
On the example app's Icon Button screen (
example/src/Examples/IconButtonExample.tsx), none of theIconButtoncomponents passed anaria-label. As a result, icon-only buttons rendered without accessible text and screen readers announced them simply as "button". When evaluated with accessibility tooling such asaxe-core, this raised a criticalbutton-nameviolation ("Buttons must have discernible text").This PR adds meaningful
aria-labels to everyIconButtoninIconButtonExample.tsx, resolving the accessibility gap and providing discernible accessible names for screen reader users on web and native.Related issue
Fixes #5182
Screenshots / Videos
N/A (Accessibility label addition)
Test plan
yarn test(all 54 test suites pass).yarn typecheck(passes without error).yarn lint(passes without error).yarn example) and inspect the/icon-buttonscreen with accessibility tools / screen reader; verify each icon button announces its accessible name without axebutton-nameviolations.