fix(apollo-react): add aria-label to suggestion navigator chevrons - #1104
Open
abegu wants to merge 1 commit into
Open
fix(apollo-react): add aria-label to suggestion navigator chevrons#1104abegu wants to merge 1 commit into
abegu wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
🟢 Approval recommended
Pull request overview
This PR improves accessibility in apollo-react’s AgentCanvas suggestion navigation by giving icon-only chevron buttons an accessible name, and adds unit tests to prevent regressions.
Changes:
- Added
aria-label="Previous suggestion"/aria-label="Next suggestion"to the two icon-only navigator buttons inSuggestionGroupNavigator. - Added
SuggestionGroupPanel.test.tsxcovering empty state, button accessible names, callback invocation, and the position counter.
File summaries
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx | Adds aria-labels to the previous/next chevron icon buttons so they have accessible names. |
| packages/apollo-react/src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.test.tsx | Introduces unit tests validating the empty render, accessible button names, navigation callbacks, and “N of M” counter rendering. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
The chevron-up/chevron-down icon buttons in SuggestionGroupNavigator (canvas AgentCanvas suggestion group panel) had no accessible name at all, since their only content is a decorative Lucide icon. Screen reader users had no way to tell what the previous/next controls did. Reported as PC-4063 against a downstream consumer (WCAG 2.4.6).
abegu
force-pushed
the
fix/suggestion-navigator-aria-label
branch
from
September 1, 2026 09:34
8598c55 to
afdee4f
Compare
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
SuggestionGroupNavigator(packages/apollo-react/src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx) had no accessible name at all — their only content is a decorative Lucide icon (chevron-up/chevron-down), which contributes nothing to the accessible name.main(not just the pinned6.20.1a downstream consumer had) before filing.Changes
aria-label="Previous suggestion"/aria-label="Next suggestion"to the two navigatorButtons.SuggestionGroupPanel.test.tsx(new file — none existed for this component) covering: empty-state renders nothing, both buttons expose accessible names, both buttons invoke their respective callbacks, and the position counter renders correctly.Test plan
vitest runon the new test file — 4/4 passingbiome check— cleantsc --noEmit— no new errorsSource
Found while investigating a WCAG 2.4.6 report (PC-4063) filed against a downstream product consuming this package — the bug turned out to be upstream here, not in the consumer.