原生单选按钮组不响应方向键切换，需用javascript监听keydown事件并手动更新checked和focus；纯css方案无法满足可访问性要求，必须确保name一致、同表单上下文、checked后立即focus。
单选按钮组默认不支持方向键切换
原生 <input type="radio"> 组在浏览器中**只响应 Tab 键进入/离开焦点流，不响应 ArrowLeft/ArrowRight 切换选中项**。这是标准行为，不是 bug。用户按 Tab 进入该组后，焦点会停在当前选中项（或第一个），但左右箭头不会改变 checked 状态——除非你手动接管键盘逻辑。
用 JavaScript 拦截 ArrowRight/ArrowLeft 实现切换
必须监听 keydown 事件，并主动更新 checked 属性。关键点不是“加 tabindex”，而是确保：同一组 radio 共享 name、有唯一 id、且能被 JS 定位到。
- 给每个
<input type="radio">设置tabindex="0"（仅首次进入需要，非必需）或依赖其天然可聚焦性 - 用
document.querySelectorAll('input[name="xxx"]')获取同组元素，不要用getElementsByTagName('input')（会混入其他 input） - 在事件处理中判断
e.key === 'ArrowRight'或'ArrowLeft'，再计算下一个索引（注意循环：末尾→开头 / 开头→末尾） - 调用
nextRadio.checked = true后，**必须紧接着nextRadio.focus()**，否则视觉焦点和实际选中状态脱节 - 别忘了
e.preventDefault()，否则部分浏览器会滚动页面
为什么不能只靠 CSS + :checked 模拟？
纯 CSS 方案（如 input#tab1:checked ~ .panel）能控制显隐，但**无法触发键盘导航所需的焦点移动和 aria-selected 同步**。屏幕阅读器看不到“当前激活项”变化，也无法用 Home/End 跳转首尾。ARIA 规范明确要求 tablist 必须用 role="tab" + aria-selected，而原生 radio 没有这些语义。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
更麻烦的是：Safari 对未显式 focus() 的 radio，即使设了 checked=true，也不会触发 change 事件——表单验证、联动逻辑可能失效。
真正要检查的三个细节
多数人卡在以下环节，不是代码写错，而是 DOM 或属性漏了：
-
name值是否完全一致（大小写敏感，空格也不行） - 所有 radio 是否都在同一表单上下文内（跨
<form></form>或 shadow DOM 会导致 querySelectorAll 找不到） - 是否在
checked = true后立即调用了.focus()，且该元素未被display: none或hidden阻止聚焦
键盘切换的本质不是“让 radio 动起来”，而是同步三件事：DOM 的 checked 状态、焦点位置、以及（如果用于 tab）aria-selected 值。少一个，可访问性就算失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
