如何使选项卡索引适用于下拉列表？

Question

我有一个带有引导下拉组件的标头，我正在尝试使用 tabindex 启用对该元素的键盘导航。以下是html和简单的css：

HTML:
<span class="pull-right">
   <span class="help-menu dropdown">
       <span class="dropdown-toggle" data-toggle="dropdown" role="button">
          <span class="help-header" tab-index="0">Help</span>
        </span>
           <ul class="dropdown-menu pull-right" tabindex="-1" role="menu">
             <li tabindex="-1"><a [href]="/help.html" target="_blank">Docs</a></li>
           </ul>
    </span>
 </span>

CSS：

.help-header{
   &:after{
      content: "\25BE"; //caret should be displayed!
   }
}
.help-menu{
     display: inline-block;
     cursor: pointer;
     background: aqua;
     margin-top: 10px;
    margin-right: 20px;
}

这是小提琴链接

现在，当我做一个选项卡时，帮助没有得到焦点。但是，当我从 help-header 类中删除 tabindex 并将其应用于带有类 pull-right 的跨度或带有类帮助菜单和下拉列表的跨度时，帮助文本将焦点放在选项卡上。尽管如此，我还是看不到点击回车或空格或向下箭头的下拉菜单。

我真的不知道如何使这项工作。一段时间以来，我一直试图弄清楚，但我失败了。

我在这里错过了 tabindex 的任何核心概念吗？任何人都可以帮助我或指出我正确的方向。

非常感谢。

干杯。

Answer 1

tabindex 属性明确定义页面内可聚焦元素（通常是链接和表单控件）的导航顺序。它还可以用于定义元素是否应该是可聚焦的。

[两者] tabindex="0" 和 tabindex="-1" 都有特殊的含义，在 HTML 中提供不同的功能。值 0 表示元素应按默认导航顺序放置。这允许本身不可聚焦元件（例如<div>，<span>和 <p>），以接收键盘焦点。当然，通常应该为所有交互元素使用链接和表单控件，但这确实允许其他元素可聚焦并触发交互。

tabindex="-1" 值从默认导航流中删除元素（即，用户不能用 Tab 键访问它），但它允许它接收编程焦点，这意味着可以从链接或脚本设置焦点。 ** 这对于不应该被标签到的元素非常有用，但可能需要为它们设置焦点。

一个很好的例子是模态对话框窗口——打开时，焦点应设置在对话框上，这样屏幕阅读器将开始阅读，键盘将开始在对话框内导航。因为对话框（可能只是一个<div>元素）在默认情况下是不可聚焦的，分配它 tabindex="-1" 允许在它出现时通过脚本设置焦点。

-1 的值在复杂的小部件和菜单中也很有用，这些小部件和菜单使用箭头键或其他快捷键来确保小部件中只有一个元素可使用 Tab 键导航，但仍允许将焦点设置在其他组件上小部件。

所以总而言之，如果您想设置某些元素由键盘选项卡启用，您应该将值更改为0。