如何使标签索引适用于下拉菜单？答案

【问题标题】：How to make tab index work for dropdowns?如何使标签索引适用于下拉菜单？
【发布时间】：2017-01-22 20:05:25
【问题描述】：

我有一个带有引导下拉组件的标题，我正在尝试使用 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;
}

这是小提琴link

现在，当我打开选项卡时，帮助没有得到焦点。但是，当我从帮助标题类中删除 tabindex 并将其应用于具有类 pull-right 的跨度或具有类帮助菜单和下拉列表的跨度时，帮助文本将焦点放在选项卡上。即使这获得了焦点，我也看不到按 Enter 或空格或向下箭头的下拉菜单。

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

我是否在这里遗漏了 tabindex 的任何核心概念。任何人都可以帮助我或指出正确的方向。

非常感谢。

干杯。

【问题讨论】：

标签： html css twitter-bootstrap keyboard-navigation

【解决方案1】：

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

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

tabindex="-1" 值将元素从默认导航中移除流（即，用户不能选择它），但它允许它接收程序化焦点，意味着焦点可以通过链接或通过脚本。** 这对于不应该使用的元素非常有用选项卡，但可能需要将焦点设置为它们。

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

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

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

【讨论】：