Skip to content

fix: avoid redundant radiogroup tab stop - #343

Open
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/remove-group-tab-stop
Open

fix: avoid redundant radiogroup tab stop#343
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/remove-group-tab-stop

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 27, 2026

Copy link
Copy Markdown

Summary

  • remove the default tabIndex=0 from the outer radiogroup
  • let the selected native radio receive the first Tab stop directly
  • preserve an explicit consumer-provided tabIndex override
  • update keyboard navigation coverage and snapshots

Why

Segmented already renders native radio inputs and handles Arrow keys on those inputs. The outer radiogroup was also focusable by default, so keyboard users had to Tab twice: first onto a group node where Arrow keys do nothing, then onto the checked radio where the interaction actually works.

This aligns the focus path with the WAI-ARIA radio-group pattern: Tab enters the group on a checked radio (or the first radio when none is checked), and Arrow keys move within the group.

The exact-base regression fails because the first Tab focuses radiogroup[tabindex="0"] instead of the checked native radio.

Reference: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

Compatibility

SegmentedProps still accepts the inherited HTML tabIndex prop. Because the remaining ...divProps spread applies it to the outer group, consumers that intentionally need a focusable group can continue to opt in; the added test covers that path.

Validation

  • npm test -- --runInBand (33 tests, 13 snapshots)
  • npm run tsc
  • npm run lint (no errors; one pre-existing MotionThumb.tsx exhaustive-deps warning)
  • npx prettier --check src/index.tsx tests/index.test.tsx
  • npm run compile
  • git diff --check

Overlap audit

No currently open rc-segmented PR changes src/index.tsx or its keyboard tests.

AI assistance disclosure: Codex was used to trace the focus path, audit open PR files and history, and draft the regression. The exact-base failure and fixed validation were run locally.

Summary by CodeRabbit

  • Bug Fixes
    • 优化 Segmented 控件的键盘导航体验:按一次 Tab 键即可聚焦首个单选项。
    • 默认情况下不再为控件容器设置 tabindex,避免产生额外的焦点停留。
    • 显式设置焦点顺序时,仍支持为单选组容器设置 tabindex="0"

@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 43c7843f-219f-4a13-8be2-dbd600a106c2

📥 Commits

Reviewing files that changed from the base of the PR and between 8cbec0b and f04fc2d.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • src/index.tsx
  • tests/index.test.tsx
💤 Files with no reviewable changes (1)
  • src/index.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


Walkthrough

Segmented 移除根容器的默认 tabIndex。键盘导航测试改为验证单次 Tab 直接聚焦首个原生 radio,并覆盖显式 tabIndex={0} 和禁用选项场景。

Changes

Segmented 键盘焦点行为

Layer / File(s) Summary
默认焦点行为与测试更新
src/index.tsx, tests/index.test.tsx
根容器不再默认设置 tabIndex。测试验证单次 Tab 直接聚焦首个 radio,且显式 tabIndex={0} 时 radiogroup 保留 tabindex="0"。禁用选项测试移除多余的容器到选项聚焦步骤。

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to f04fc

This localized accessibility behavior change removes the redundant default group tab stop while preserving explicit overrides, with focused test and snapshot updates; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: afc163, emilyyyliu

Poem

小兔检查焦点圈
Tab 键轻跳到 radio
容器不再占一站
显式索引仍生效
禁用选项安静守候
测试把路径照亮

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了主要变更:移除冗余的 radiogroup Tab 停靠点。标题简洁、明确,并与代码和测试变更一致。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.

✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant