fix: resolve accessibility issue by adding aria label to caret component #292
Conversation
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
|
I have updated the PR with screenshots. Can I get a review on this, please? |
|
@bhaskarsontakke @SB-akshaythakar @SB-pradeep-bande @prafullaAtSB Hi All, Can anyone please review this? |
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.
This PR aims to resolve an accessibility issue by adding an ARIA label to the Caret component.
Motivation and Context
We use Stoplight elements in our application, and while scanning for accessibility issues, we discovered this problem
Description
ARIA commands must have an accessible name: A
divwith the role of 'button' should include anaria-labelto provide an accessible name.How Has This Been Tested?
Testing was conducted locally using the Axe DevTools browser extension for web accessibility testing.
Steps
Install Axe DevTools: If you haven't already, install the Axe DevTools extension for your browser. It's available for Chrome and Firefox.
Chrome extension
https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
Firefox extension
https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
Open the Web Page: Navigate to the web page you want to test for accessibility issues.
E.g.: http://localhost:6006/?path=/story/combiners--array-one-of
Open Developer Tools: Right-click on the page and select "Inspect"
Access Axe DevTools: In the Developer Tools panel, look for the "axe DevTools" tab. Click on it to open the Axe DevTools interface.
Run an Accessibility Scan: Click the "Full Page Scan" button within the Axe DevTools tab. This will start the accessibility scan of the current page.
Review the Results: Once the scan is complete, Axe DevTools will display a list of accessibility issues found on the page. The issues are categorized by severity (e.g., critical, serious, moderate, minor).
Screenshot(s)/recordings(s)
Before
After
Types of changes
Checklist