手风琴组件Tab键导航不符合预期问题排查

问题描述 #

手风琴组件功能正常，但Tab键导航行为不符合预期。代码如下：

<ul>
  <li tabindex="0">
    <h4 aria-expanded="false" aria-controls="abc" id="id_abc">
      <span>My Title 1</span>
    </h4>
    <div id="abc" role="region" aria-labelledby="id_abc">
      <ul>
        <li>
          <a href="http://google.com">Link a1</a>
        </li>
        <li>
          <a href="#">Link a2</a>
        </li>
      </ul>
    </div>
  </li>
  <li tabindex="0">
    <h4 aria-expanded="false" aria-controls="xyz" id="id_xyz">
      <span>My Title 2</span>
    </h4>
    <div id="xyz" role="region" aria-labelledby="id_xyz">
      <ul>
        <li>
          <a href="http://google.com">Link b1</a>
        </li>
        <li>
          <a href="http://google.com">Link b2</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

异常表现 #

• 所有面板收起时，按Tab本应仅在My Title 1和My Title 2之间切换，但实际会进入收起面板内的Link a1、Link a2等链接（aria-expanded状态切换正常）。
• 将<a>标签改为<p>或纯文本时，导航行为符合预期。

问题原因 #

这事儿核心就是带href的<a>是原生可聚焦元素——哪怕面板看着是收起的，只要这些链接在DOM里存在，浏览器的Tab导航就会默认把它们算进可遍历的元素列表里。

具体细节：

• 只要<a>带有href属性（哪怕是#这种空链接），浏览器就认定它是可聚焦元素，Tab键自然会跳到它。
• 你现在只给标题加了aria-expanded标记状态，但没处理收起面板里的可聚焦元素——它们依然在Tab导航序列中。
• 换成<p>或纯文本就没问题，因为这些元素本身就不是可聚焦的，Tab根本不会遍历它们。

修复方法 #

要让收起面板里的链接不被Tab到，得在面板收起时把内部可聚焦元素移出Tab序列，同时告诉屏幕阅读器忽略它们：

• 最简单的方案：面板收起时，给面板容器添加aria-hidden="true"，同时用display:none视觉隐藏（这俩搭配使用，既能让屏幕阅读器忽略该区域，也能从DOM布局中移除元素，自然就不会被Tab到）。
• 如果需要保留面板DOM做动画效果，就遍历面板内的所有可聚焦元素（比如<a>、<button>），给它们设置tabindex="-1"，展开时再移除该属性或恢复默认值。

示例：收起状态的面板代码

<div id="abc" role="region" aria-labelledby="id_abc" aria-hidden="true" style="display: none;">
  <ul>
    <li>
      <a href="http://google.com">Link a1</a>
    </li>
    <li>
      <a href="#">Link a2</a>
    </li>
  </ul>
</div>

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