fix(web): copy code component accessibility #2868
Open
+3
−0
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 adds screen reader-only text to the
copy-code.tsxcomponent witharia-liveto give feedback once the content is copied.This is meant to make it compliant with WCAG's Success Criterion 1.1.1: Non-text Content (Level A), ensuring the button's purpose and state, represented by an icon, can be understood by users of assistive technologies.
Changes were tested on Windows 11, Chrome, NVDA. For reference, before the announcement would be "button", now "button, copy to clipboard" and "copied" after clicked.
I haven't opened an issue since it wasn't clear if they should be opened for issues/bugs outside the library itself. Let me know if one's necessary.
Summary by cubic
Adds a screen reader–only live region to the copy-code button so assistive tech announces “Copy to clipboard” and “Copied.” This clarifies the button’s purpose and state and aligns with WCAG 1.1.1.
Written for commit 187e0ff. Summary will update on new commits.