Radio button无法通过键盘选中，如何启用其Tab键导航功能？

你的问题核心是原生radio被完全隐藏（比如用了display: none），导致浏览器将其从焦点序列中移除，即便添加tabIndex也无效。伪元素本身不是可交互元素，无法替代原生radio的焦点与键盘导航能力。以下是具体解决方案：

1. 用「视觉隐藏」替代完全隐藏原生radio #

不要使用display: none或visibility: hidden，改用以下CSS让元素在视觉上消失，但保留焦点和可访问性：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

将这个类添加到你的radio输入框上，替换原来的隐藏样式。

2. 给Label添加伪元素样式并处理焦点状态 #

通过Label的伪元素模拟radio外观，同时在原生radio获得焦点时，给Label添加焦点提示，让用户能直观看到当前聚焦选项：

/* 基础布局：给label添加上padding，预留伪元素位置 */
label[for^="giftTitle"],
label[for^="WillTitle"],
label[for^="legacyEventsTitle"] {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  margin-right: 15px;
}

/* 模拟未选中的radio样式 */
label[for^="giftTitle"]::before,
label[for^="WillTitle"]::before,
label[for^="legacyEventsTitle"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: #fff;
}

/* 模拟选中的radio样式 */
input[type="radio"]:checked + label::before {
  background-color: #007bff;
  border-color: #007bff;
  /* 可选：添加内部圆点 */
  box-shadow: inset 0 0 0 4px #fff;
}

/* 焦点状态提示：原生radio聚焦时，给label加外框 */
input[type="radio"]:focus + label {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

3. 调整你的React代码 #

将radio的内联样式替换为className="visually-hidden"，示例如下：

<fieldset
  style={{
    borderStyle: "none",
    marginInline: "unset",
    paddingInline: "unset",
  }}
>
  <legend
    style={{ float: "left", paddingRight: "50px", width: "400px" }}
  >
    {APP_MESSAGES.GIFT_TITLE}
  </legend>

  <input
    type="radio"
    name="giftwill"
    id="giftTitleTrue"
    className="visually-hidden"
    value="true"
    checked={formInputs.giftwill === "true"}
    onChange={onChange}
  />
  <label htmlFor="giftTitleTrue">Yes</label>

  <input
    type="radio"
    name="giftwill"
    id="giftTitleFalse"
    className="visually-hidden"
    value="false"
    checked={formInputs.giftwill === "false"}
    onChange={onChange}
  />
  <label htmlFor="giftTitleFalse">No</label>
</fieldset>

方案原理 #

• 视觉隐藏的radio仍保留在DOM中，维持了原生的焦点与键盘交互逻辑，Tab键可正常聚焦，箭头键能切换同组选项。
• 通过:focus + label选择器，在原生radio聚焦时给关联的Label添加视觉提示，解决了隐藏原生控件后焦点不可见的问题。

内容的提问来源于stack exchange，提问作者user23251757