含tabindex的SPAN元素导致表单Tab键无法切换至下一个元素

看起来你遇到的是典型的自定义可聚焦元素干扰表单键盘导航的问题，结合你无法修改后端标记的限制，咱们可以通过前端JavaScript来修复这个问题，下面分两种场景给出解决方案：

方案1：修复按钮角色元素的键盘事件（保留现有交互） #

如果这个带role="button"的<span>需要保留按钮交互逻辑（比如点击展开/收起），那核心问题大概率是它的键盘事件处理中错误阻止了Tab键的默认行为。咱们可以给所有这类元素绑定一个keydown事件，确保Tab键能正常工作：

// 选中所有符合条件的span元素
const buttonSpans = document.querySelectorAll('span[role="button"][aria-expanded][tabindex="0"]');

buttonSpans.forEach(span => {
  span.addEventListener('keydown', function(e) {
    // 只处理Enter和Space键（符合button角色的键盘交互规范）
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      // 触发点击事件，模拟按钮行为
      this.click();
    }
    // 对于Tab键，不做任何阻止，让浏览器默认处理导航
  });
});

这段代码的作用是：

• 确保Enter和Space键能触发按钮的点击行为（符合WAI-ARIA按钮的交互标准）
• 完全保留Tab键的默认导航逻辑，不会阻止焦点跳转到下一个元素

方案2：移除冗余的可聚焦属性（更符合表单无障碍规范） #

仔细看你的代码结构，这个<span>其实是作为复选框的标签（通过aria-labelledby和复选框关联），而复选框本身已经是可聚焦的表单元素。这种情况下，给标签添加tabindex="0"和role="button"属于冗余设置，反而会干扰正常的表单导航。咱们可以直接移除这些属性：

const buttonSpans = document.querySelectorAll('span[role="button"][aria-expanded][tabindex="0"]');

buttonSpans.forEach(span => {
  // 移除tabindex，让标签不再成为可聚焦元素
  span.removeAttribute('tabindex');
  // 移除role="button"，因为它本质是复选框的标签
  span.removeAttribute('role');
  // 保留aria-expanded（如果它用于控制展开/收起逻辑）
  // 如果不需要展开逻辑，也可以移除aria-expanded
});

这样调整后，键盘导航会直接聚焦到复选框本身，符合原生表单的无障碍交互逻辑，用户可以通过空格键选中/取消选中复选框，Tab键也能正常在表单元素间切换。

额外建议：检查全局事件监听 #

如果上面的方案都没解决问题，你需要排查页面中是否存在全局的keydown事件监听，比如某些框架或自定义脚本中是否调用了event.preventDefault()而没有判断Tab键。可以在浏览器开发者工具的Event Listeners面板中查看所有keydown事件，找到可能的冲突代码。

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