[helloigig]

Fixes #6179

When the checked radio in a RadioGroup is disabled, it held the group's single roving tab stop. With nativeButton, a disabled <button> leaves the tab order, so the whole group could not be reached with Tab.

RadioRoot now marks itself as the active composite item only when it is checked and enabled, similar to how TabsTab avoids highlighting a disabled tab. The composite then uses its existing fallback and puts the tab stop on the first enabled radio. The shared composite code is not changed.

Behavior:

• No radio checked: unchanged
• Checked and enabled: unchanged, tab stop on the checked radio
• Checked and disabled: tab stop moves to the first enabled radio
• Every radio disabled (group not disabled): a single tab stop on the first radio (previously the checked one)
• readOnly checked radio: keeps the tab stop
• Group disabled: unchanged, every radio has tabIndex -1
• Arrow-key navigation and form value: unchanged

Tests include a real Tab-key test with nativeButton.

Note: this reverses the test added in #6022 ("keeps the tab stop on a checked radio that is disabled"). Could a maintainer confirm this is the intended behavior?

Known limitation (also on master): if the checked radio becomes disabled after mount, it keeps the tab stop. Happy to open a follow-up for that.

• I have followed (at least) the PR section of the contributing guide.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@6193
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@6193
  

commit: 8a8f3c4

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+494B(+0.10%)	🔺+186B(+0.11%)

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 2m 30s · details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8a8f3c4
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6af2c58bd52622e38626b0d2
😎 Deploy Preview	https://deploy-preview-6193--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

PR review

One merge-blocking keyboard regression. The initial-render fix works, but the tab stop is only chosen when the radios first register, so a checked radio that becomes enabled later never gets it back. Reproduced in Chromium with real Tab presses against the PR head and its base.

Bugs (1)

1. 🔴 Enabling the checked radio after mount leaves the group out of the tab order

Location: packages/react/src/radio/root/RadioRoot.tsx:137

[ACTIVE_COMPOSITE_ITEM as string]: checked && !disabled ? '' : undefined,

useCompositeRoot reads ACTIVE_COMPOSITE_ITEM once, when the composite map is first populated. If the checked radio is disabled at that point, the tab stop goes to the first radio (every radio disabled) or the first enabled one. When the checked radio is enabled later, it marks itself active again, but nothing moves the tab stop back to it.

nativeButton radios, defaultValue="b", Tab from a button before the group:

Disabled (a, b) after mount	base focuses	PR focuses
(true, true) → (true, false)	B	the next button (group skipped)
(false, false) → (false, true)	the next button	the next button

The second row is the known limitation from the PR description and also fails on the base commit. The first row is new.

Failure scenario: Radios are disabled while availability loads, and the checked option then becomes available. With nativeButton, Tab skips the whole group because the tab stop stays on a radio that is still a disabled <button>. Without nativeButton, the tab stop lands on a disabled radio instead of the checked one.

Fix: Sync the tab stop when the radio becomes checked and enabled, the way TabsTab does for its active tab: a layout effect that calls onHighlightedIndexChange(index) when checked && !disabled and highlightedIndex !== index. Add the disabled → enabled case to the native Tab test.

Verdict

Request changes - a realistic disabled → enabled transition now takes the radio group out of the tab order.

---

🤖 Review generated with Claude Code

[helloigig]

Fixed in 8a8f3c4: a radio that becomes checked and enabled after mount now takes the tab stop back, unless focus is already inside the group, and the native Tab test covers the disabled to enabled case. Row 2 (disabling the checked radio after mount) is still the known limitation from the description, since this change only handles a radio becoming enabled.