Question

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

f_i + 1

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>

这是小提琴link

现在，当我选择标签时，帮助无法获得焦点。但是，当我从help-header类中删除tabindex并将其应用于带有类右拉的跨度或带有类帮助菜单和下拉列表的跨度时，帮助文本将焦点放在选项卡上。即使这样得到了关注，我也无法看到击中输入或空格或向下箭头的下拉列表。

我真的不确定如何做这项工作。我一直试图弄清楚，但我失败了。

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

非常感谢。

干杯。

Answer 1

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

[Both] tabindex =＆＃34; 0＆＃34;和tabindex =＆＃34; -1＆＃34;有特殊意义并提供   HTML中的独特功能。值为0表示该值   元素应放在默认的导航顺序中。这允许   不可原生聚焦的元素（例如<div>，<span>和   <p>）获得键盘焦点。当然一般应该使用   所有交互元素的链接和表单控件，但确实如此   允许其他元素可聚焦并触发互动。

tabindex =＆＃34; -1＆＃34; value从默认导航中删除元素   流（即，用户不能标记到它），但它允许它接收   程序化焦点，意味着焦点可以通过链接或与之设置   脚本。**这对于不应该的元素非常有用   标签为，但可能需要设置焦点。

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

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

总而言之，如果您想通过键盘标签设置某些元素，则应将值更改为 0 。

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

1 个答案: