fix(a11y): add aria-labels to copy-to-clipboard buttons#10842
Open
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
Open
fix(a11y): add aria-labels to copy-to-clipboard buttons#10842yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
Conversation
The copy-to-clipboard buttons across the UI used empty <button/> elements with no accessible label, making them invisible to screen readers. This adds descriptive aria-label attributes to: - cURL command copy button in curl.jsx - Code highlight copy button in HighlightCode.jsx - Request snippet copy button in request-snippets.jsx Partially addresses swagger-api#10699
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.
Description
The copy-to-clipboard buttons across the UI used empty
<button/>elements with no accessible name, making them invisible to screen readers and failing WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value).This adds descriptive
aria-labelattributes to three copy-to-clipboard buttons:curl.jsx- cURL command copy button:"Copy cURL command to clipboard"HighlightCode.jsx- Code block copy button:"Copy to clipboard"request-snippets.jsx- Request snippet copy button:"Copy code snippet to clipboard"Motivation and Context
Partially addresses #10699
Screen reader users could not identify or interact with these buttons because they had no accessible name. The buttons were rendered as empty
<button/>elements inside thereact-copy-to-clipboardwrapper.How Has This Been Tested?
aria-labelattributesreact-copy-to-clipboardcomponent passes through props to the child element, soaria-labelon the button element works correctlyScreenshots (if appropriate):
N/A - accessibility improvement, no visual change
Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests