Repository navigation
feat(a11y): make segmented control component fully a11y compliant [AC-4742] - #1439
Merged
Merged
Conversation
Stefan3002
force-pushed
the
fix-segmented-control-a11y
branch
6 times, most recently
from
October 1, 2026 14:45
c7f224e to
42654a2
Compare
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Resolve the unnamed tablist, documented aria-label API mismatch, and incorrect Up/Down key handling.
Review effort: Lite
Findings: 2
Open (2)
What changed in this PR
Updates SegmentedControl toward ARIA tabs accessibility with keyboard navigation, focus management, labeling, tests, stories, and snapshots.
Changes:
- Adds tab/panel ARIA relationships and roving focus.
- Adds arrow, Home, and End keyboard behavior.
- Expands tests, stories, and snapshots.
- Requires fixes for labeling API consistency and horizontal key handling.
| File | Summary |
|---|---|
src/components/SegmentedControl/SegmentedControl.tsx |
Implements accessibility semantics and keyboard interaction; contains unresolved labeling and navigation issues. |
src/components/SegmentedControl/SegmentedControl.test.tsx |
Adds focus and keyboard behavior tests. |
src/components/SegmentedControl/SegmentedControl.stories.tsx |
Updates stories with control labels. |
src/components/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap |
Updates rendered accessibility markup snapshots. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Stefan3002
force-pushed
the
fix-segmented-control-a11y
branch
2 times, most recently
from
October 7, 2026 14:33
f62b23a to
9db4a49
Compare
Stefan3002
force-pushed
the
fix-segmented-control-a11y
branch
from
October 7, 2026 14:40
9db4a49 to
b7f25e9
Compare
|
LGTM! I tried it locally and it is working fine. I could not upload my screen record and I do not know why. |
Stefan3002
force-pushed
the
fix-segmented-control-a11y
branch
from
October 14, 2026 16:11
b7f25e9 to
05fcd33
Compare
bartaz-canonical
added
Review: QA +1
Review: Code +1
and removed
Review: QA needed
Review: Code needed
Review: Percy needed
labels
|
🎉 This PR is included in version 4.13.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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.
Done
SegmentedControlcomponent a11y compliant.QA
Pinging @canonical/react-library-maintainers for a review.
QA steps
yarn docsSegmentedControlcomponent-- You can navigate the tabs via arrow keys
-- Pressing
homekey takes you to the first tab-- Pressing
endkey takes you the last one-- Pressing
tabkey shifts focus inside the tab/button selected-- Pressing arrow key do not work now anymore. This is because the content itself might want to use them.
-- Pressing
shift + tabkeys takes you back to the tabs / buttonsPercy steps
Fixes
Fixes: #1438 and #AC-4742 .