<ul> 上的 tabindex="-1" 无效

Question

我有一个像这样的大型下拉菜单，来自 bootstrap（代码简化）：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul tabindex="-1">
      <li>1st Link</li>
      <li>2nd Link</li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

小 fiddle 这里：https://jsfiddle.net/48m2ppzc/

我想使用 Tab 键简化导航：

开头元素 <ul> 有一个 max-height of 0px 所以我不应该用 tab 键在里面导航（因为菜单是隐藏的） .
当我点击 "Menu Button" link 时，应该会出现菜单（我将 max-height 设置为 500px），我需要将 tabindex 更改为'0'（我可以用 JQuery 做到这一点，所以这不是问题）

问题出在第一点：tabindex="-1" 不起作用，我仍然可以使用 Tab 键在菜单内导航。

我该如何解决这个问题？我使用 HTML5 所以 tabindex 应该适用于所有 HTML 元素，我也尝试过 tabindex="0".

Answer 1

tabindex 不被子元素继承，所以你需要在所有项上手动设置它：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul>
      <li><a href="#" tabindex="-1">1st Link</a></li>
      <li><a href="#" tabindex="-1">2nd Link</a></li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

由于这可能与可访问性相关，因此在语义上使用 aria-hidden 属性也可能有所帮助（并在它可见时切换它）：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul aria-hidden="true">
      <li><a href="#" tabindex="-1">1st Link</a></li>
      <li><a href="#" tabindex="-1">2nd Link</a></li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

<ul> 上的 tabindex="-1" 无效

tabindex="-1" on <ul> doesn't work

html

tabindex