如何修复AXE「交互式控件不得嵌套」错误（保留无障碍角色）

核心问题是role="option"属于交互式ARIA角色，嵌套原生button会触发「交互式控件不得嵌套」的AXE规则冲突，同时破坏无障碍语义。以下是几种兼顾语义、屏幕阅读器支持和UI效果的修复方案：

方案1：拆分DOM结构，让option与button同级 #

把按钮从<li role="option">中移出，用容器包裹列表和按钮组，通过CSS实现视觉对齐，彻底避免嵌套问题：

<!-- 外层容器用于布局对齐 -->
<div class="list-with-actions">
  <ul role="listbox">
    <li role="option" tabindex="0">Active</li>
    <li role="option" tabindex="0">A list item only</li>
    <li role="option" tabindex="0">Additional List</li>
  </ul>
  <!-- 按钮组与列表项一一对应 -->
  <div class="action-buttons">
    <button>Expand</button>
    <!-- 空元素占位，保持布局对齐 -->
    <span class="empty-placeholder"></span>
    <button>Expand</button>
  </div>
</div>

关键细节：

• 给每个role="option"的<li>添加tabindex="0"，确保键盘可聚焦，符合listbox的键盘交互规范
• 用CSS的Flexbox或Grid让列表和按钮组的项垂直对齐，还原原UI效果
• 空占位元素可以设置和按钮相同的尺寸，避免布局错位

方案2：将option角色转移到内部span，li作为纯容器 #

如果不想大幅改动DOM结构，把role="option"从<li>转移到内部的span上，让<li>仅作为布局容器，button和span同级共存：

<ul role="listbox">
  <li>
    <span role="option" tabindex="0" class="option-content">Active</span>
    <button>Expand</button>
  </li>
  <li>
    <span role="option" tabindex="0" class="option-content">A list item only</span>
  </li>
  <li>
    <span role="option" tabindex="0" class="option-content">Additional List</span>
    <button>Expand</button>
  </li>
</ul>

关键细节：

• 把原<li>上的点击事件处理器转移到带role="option"的span上
• 给span添加tabindex="0"，支持键盘聚焦和导航
• 屏幕阅读器会识别span为listbox的option，正常播报内容，同时button作为独立控件，无障碍支持不受影响

方案3：临时应急：阻止事件冒泡（不推荐） #

如果暂时无法修改DOM，可以给button添加事件阻止冒泡，避免option和button的事件冲突，但这只是临时 workaround，不能解决根本的嵌套语义问题：

// 给所有Expand按钮添加事件处理
document.querySelectorAll('li button').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父级option
    // 执行展开逻辑
  });
});

注意：这种方法无法消除AXE的语义错误，仅能解决交互冲突，长期来看还是要调整DOM结构。

通用无障碍优化点 #

• 实现listbox的键盘导航：支持上下箭头切换option焦点，Enter/空格键触发option的点击事件
• 给button添加aria-label或aria-describedby，如果按钮文本不够明确（比如仅用"Expand"），可以补充说明展开的内容：<button aria-label="Expand Active section">Expand</button>

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