a11y: add aria-label to response action buttons for screen readers#12457
Open
adityasingh2400 wants to merge 1 commit into
Open
a11y: add aria-label to response action buttons for screen readers#12457adityasingh2400 wants to merge 1 commit into
adityasingh2400 wants to merge 1 commit into
Conversation
The Insert/Copy/Apply/Diff buttons on chat responses are pure-icon elements, so NVDA and similar screen readers announce only the fallback role text. Add an aria-label matching the user-visible action to each button so assistive tech reads them out as 'Insert at cursor', 'Copy code block', etc. No behavior change. Part 1 of the broader sidebar a11y work tracked in continuedev#12325. Fixes continuedev#12326
Contributor
|
All contributors have signed the CLA ✍️ ✅ |
Author
|
I have read the CLA Document and I hereby sign the CLA |
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.
Summary
Fixes #12326 (problem 1 only — chat response action buttons).
The Insert / Copy / Apply / Diff / Compact / Generate-rule / Continue / Delete / Helpful / Unhelpful buttons in chat responses are pure-icon elements with a hover tooltip but no accessible name. NVDA and other screen readers announce them as just "button" or "unlabeled button," which is the specific blocker called out in the issue.
This PR adds an aria-label to each toolbar button, matching the user-visible action. Pure prop additions, no behavior or styling changes.
Changes
The broader sidebar / settings / model-selector accessibility audit described in #12325 is out of scope for this first cut; this is the buttons-only piece called out in #12326.
Test plan
Summary by cubic
Add aria-labels to chat response action buttons so screen readers announce clear names. Fixes #12326 for buttons only with no visual or behavior changes.
HeaderButtonWithToolTipandToolbarButtonWithTooltipacceptaria-labeland default to the tooltip; added role="button" for div-based clickables.Written for commit f05e209. Summary will update on new commits. Review in cubic