本文详解 react/typescript 中 radio 按钮组无法通过 tab 键顺序聚焦的根本原因，并提供符合 wai-aria 规范的解决方案：统一 name 属性、合理设置 tabindex、监听箭头键实现组内切换，避免 tabindex={0} 误用导致焦点逸出。
本文详解 react/typescript 中 radio 按钮组无法通过 tab 键顺序聚焦的根本原因，并提供符合 wai-aria 规范的解决方案：统一 name 属性、合理设置 tabindex、监听箭头键实现组内切换，避免 tabindex={0} 误用导致焦点逸出。
在 Web 可访问性标准中，原生 元素本身不支持连续 Tab 导航到每个单选按钮——这是设计使然，而非 bug。根据 W3C Radio Button 规范，浏览器对 radio 组的默认键盘行为是：
- ✅ Tab 键：仅将焦点进入或离开整个 radio 组（即第一个/最后一个可聚焦项）；
- ✅ 方向键（↑↓←→）：在组内切换选中项（无需重新聚焦）；
- ❌ Tab 键不会逐个聚焦每个 —— 即使你为每个 radio 设置 tabIndex={0}，也会破坏原生语义，导致焦点跳转异常（如跳到页面其他元素），甚至干扰屏幕阅读器。
你的代码中存在两个关键问题：
- tabIndex={0} 被错误地应用于每个独立 radio，使它们变成多个“独立可聚焦控件”，而非一个逻辑组；
- autoFocus={index === 0} 与 tabIndex={0} 冲突，且 onFocus 中强制 e.target.checked = true 会干扰原生行为（例如用户用方向键切换时意外触发 onChange）。
✅ 正确做法：保留原生 radio 语义，仅需确保以下三点
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
1. 所有同组 radio 必须共享相同的 name 属性
这是浏览器识别 radio 组的唯一依据。你已正确使用 name="myRadio"，这点无需修改。
2. 移除所有 tabIndex，让浏览器自动管理焦点流
// ❌ 错误：为每个 radio 设置 tabIndex={0}
<input tabindex="{0}" type="radio" name="myRadio" ...>
// ✅ 正确：完全移除 tabIndex，依赖原生行为
<input type="radio" name="myRadio" ...>
3. 用 useEffect + keydown 实现可选的增强导航（如需 Tab 进入后直接用方向键操作）
import { useRef, useEffect } from 'react';
export default function RadioButtonAnswers({
answers,
updateCurrentAnswer,
setDisabled
}: RadioButtonAnswersProps) {
const groupRef = useRef<htmldivelement>(null);
// 可选：首次挂载时自动聚焦第一个 radio（替代 autoFocus）
useEffect(() => {
const firstRadio = groupRef.current?.querySelector<htmlinputelement>(
'input[type="radio"][name="myRadio"]'
);
if (firstRadio && !firstRadio.checked) {
firstRadio.focus();
}
}, []);
const handleChange = (val: string) => {
updateCurrentAnswer(val);
setDisabled(false);
};
// ✅ 精简后的 radio 渲染（无 tabIndex，无 autoFocus）
const renderRadio = (a: SurveyAnswer, index: number) => (
<label key="{index}" classname="flex items-center my-1">
<input type="radio" name="myRadio" value="{a.answer}" checked onchange="{(e)"> handleChange(e.target.value)}
className="form-radio focus:ring-2 focus:ring-blue-500"
/>
<span classname="mx-2">{a.answer}</span>
</label>
);
return (
<div ref="{groupRef}">
{answers.map((a, index) =>
a.answerType === "option" ? renderRadio(a, index) : null
)}
</div>
);
}</htmlinputelement></htmldivelement>
⚠️ 重要注意事项
- 受控组件必须同步 checked 属性：若 updateCurrentAnswer 改变了当前选中值，请确保父组件传入 currentValue，并在 input 上绑定 checked={a.answer === currentValue}，否则视觉状态与实际值脱节；
- 文本输入联动场景（optionText）需特殊处理：此时 radio + text 应视为一个复合控件，建议用 role="group" 包裹，并为文本框设置 tabIndex={-1}（仅当 radio 选中时才启用），避免破坏 tab 顺序；
- 无障碍验证：使用 Chrome DevTools 的 Accessibility Inspector 检查 radiogroup 角色是否被正确识别，或运行 axe 测试工具验证 WCAG 2.1 SC 2.4.3（Focus Order）。
总结
不要试图用 tabIndex={0} “修复” radio 的 Tab 导航——这违背了 HTML 语义和可访问性原则。真正的解决方案是：信任原生行为，精简代码，强化受控状态管理，并通过键盘事件（ArrowKeys）补充交互逻辑。这样既保证了屏幕阅读器、键盘用户的无缝体验，也降低了维护成本。
