使用Tab键无法聚焦带嵌套控件的第二个Radio button问题

问题根源 #

你遇到的核心问题是：第一个单选框的label标签里嵌套了一个select下拉框，导致两个关键问题：

1. 当聚焦第一个单选框时，按箭头键切换同组单选框的操作会被下拉框拦截，无法切换到第二个"No screening"单选框；
2. 按Tab键时，需要遍历完第一个单选框下方卡片里的所有控件，才能到达第二个单选框，容易让用户误以为它无法聚焦。

简单修复方案（无需更换布局） #

方案1：调整DOM结构（推荐，符合无障碍设计）

把select下拉框从第一个单选框的label中移出，让label只负责关联单选框，避免嵌套可聚焦元素干扰单选组的箭头键切换逻辑。

修改后的HTML片段：

<div class="form-check">
  <input type="radio" id="reasonUploadScreening" name="reasonUpload" value="screening" autocomplete="off" tabindex="0">
  <label class="btn" for="reasonUploadScreening">Screening</label>
  <select id="screeningId" name="screeningId" class="field">
    <option value="" disabled="" selected="">Select a screening</option>
    <option value="20240328-1318">20240328-1318 John Doe (26-02-1968)</option>
    <option value="20240328-1318">20240328-1604 [Anonymous]</option>
    <option value="20240201-1575">20240201-1575 Jane Smith (11-11-1957)</option>
    <option value="20240201-1100">20240201-1100 Peter Johnson (21-01-1980)</option>
  </select>
  <div class="card screening top-spacer">
    <!-- 卡片内内容不变 -->
  </div>
</div>

调整后，箭头键可以正常在两个reasonUpload单选框之间切换，Tab顺序也会更直观。

方案2：添加少量JS代码（不改动DOM）

如果不想调整布局，可以通过JS阻止下拉框在单选框聚焦时捕获箭头键事件：

const screeningRadio = document.getElementById('reasonUploadScreening');
const screeningSelect = document.getElementById('screeningId');

function blockArrowKeys(e) {
  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
    e.stopPropagation();
  }
}

screeningRadio.addEventListener('focus', () => {
  screeningSelect.addEventListener('keydown', blockArrowKeys);
});

screeningRadio.addEventListener('blur', () => {
  screeningSelect.removeEventListener('keydown', blockArrowKeys);
});

这段代码会在第一个单选框聚焦时，阻止下拉框响应箭头键，让单选组的切换逻辑生效。

额外验证 #

如果担心单选框被遮挡，可以临时给单选框加个边框测试：

input[type="radio"] {
  outline: 1px solid red;
}

能看到红色边框说明单选框没有被其他元素覆盖，聚焦逻辑本身是正常的。

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