fix(CDS-1170): Radiocell duplicate tab targets#326
Merged
maximo-macchi-cb merged 5 commits intocoinbase:masterfrom Jan 26, 2026
Merged
fix(CDS-1170): Radiocell duplicate tab targets#326maximo-macchi-cb merged 5 commits intocoinbase:masterfrom
maximo-macchi-cb merged 5 commits intocoinbase:masterfrom
Conversation
…tead of Pressable The RadioCell component had two focusable elements in the tab order: the outer Pressable label wrapper and the inner radio input. This created duplicate tab targets for screen reader and keyboard users. By switching from Pressable to Interactable, the label wrapper is no longer added to the tab order (since labels aren't natively tabbable and Interactable doesn't add tabIndex). The inner radio input remains the sole tab target, and the existing :focus-within CSS still shows the focus ring on the container. Fixes CDS-1170
Collaborator
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
samcartersmith
had a problem deploying
to
production
GitHub Actions
Failure
samcartersmith
had a problem deploying
to
production
GitHub Actions
Failure
samcartersmith
had a problem deploying
to
production
GitHub Actions
Failure
…icate tab target
Reverts the Interactable approach in favor of keeping Pressable with tabIndex={-1}.
This removes the outer label wrapper from the tab order while maintaining parity
with mobile and avoiding a breaking change for consumers.
The inner radio input remains the sole tab target, and the existing :focus-within
CSS still shows the focus ring on the container.
Fixes CDS-1170
samcartersmith
had a problem deploying
to
production
GitHub Actions
Failure
maximo-macchi-cb
previously approved these changes
Jan 26, 2026
samcartersmith
had a problem deploying
to
production
GitHub Actions
Failure
maximo-macchi-cb
approved these changes
Jan 26, 2026
cb-ekuersch
pushed a commit
that referenced
this pull request
Jan 30, 2026
* fix(RadioCell): remove duplicate tab target by using Interactable instead of Pressable
The RadioCell component had two focusable elements in the tab order: the outer
Pressable label wrapper and the inner radio input. This created duplicate tab
targets for screen reader and keyboard users.
By switching from Pressable to Interactable, the label wrapper is no longer
added to the tab order (since labels aren't natively tabbable and Interactable
doesn't add tabIndex). The inner radio input remains the sole tab target, and
the existing :focus-within CSS still shows the focus ring on the container.
Fixes CDS-1170
* chore(web): bump version to 8.38.6
* chore: align all package versions to 8.38.6
* fix(RadioCell): use tabIndex={-1} instead of Interactable to fix duplicate tab target
Reverts the Interactable approach in favor of keeping Pressable with tabIndex={-1}.
This removes the outer label wrapper from the tab order while maintaining parity
with mobile and avoiding a breaking change for consumers.
The inner radio input remains the sole tab target, and the existing :focus-within
CSS still shows the focus ring on the container.
Fixes CDS-1170
* Update CHANGELOG.md
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
3 participants
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.
Fixes CDS-1170
What changed? Why?
Changed to a tabindex="-1" on the pressable to avoid the duplicate tab stop.
Root cause (required for bugfixes)
The Pressable that was wrapping the RadioCell is adding another tabindex="0".
Ticket: https://linear.app/coinbase/issue/CDS-1170/radiocell-duplicate-tab-targets
UI changes
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false