如何使选项卡索引适用于下拉菜单? [英] How to make tab index work for dropdowns?

问题描述

我有一个带有bootstrap下拉组件的标头，我试图通过使用tabindex启用到该元素的键盘导航.以下是html和简单的CSS:

I have a header with a bootstrap dropdown component and I am trying to enable keyboard navigation to that element by using tabindex. The following is the html and simple 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类的span或具有class help-menu和dropdown的span时，Help文本将焦点放在tab上.即使这是焦点，但我看不到点击Enter或空格或下拉箭头的下拉菜单.

Now, the Help doesn't get focus when I do a tab. But when I remove the tabindex from help-header class and apply it to either the span with class pull-right or the span with class help-menu and dropdown, the Help text gets the focus on tab. Even though, that gets the focus, I can't see the dropdown on hitting enter or space or the down arrow.

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

I'm really not sure how to make this work. I have been trying to figure it out since a while but I failed.

我在这里缺少tabindex的任何核心概念吗?任何人都可以帮助我或为我指出正确的方向.

Am I missing any core concept of the tabindex here. Could anyone please help me or point me to a right direction.

非常感谢.

干杯.

推荐答案

tabindex属性显式定义以下内容的导航顺序 页面内的可聚焦元素(通常是链接和表单控件). 它也可以用来定义元素是否应该是可聚焦的或 不是.

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

[tabindex ="0"和tabindex =-1"都有特殊含义并提供 HTML中的独特功能.值为0表示 元素应按默认导航顺序放置.这允许 本机无法聚焦的元素(例如<div>，<span>和 <p>)以接收键盘焦点.当然应该一般使用 所有互动元素的链接和表单控件，但这确实 允许其他元素具有焦点并触发交互.

[Both] tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

tabindex =-1"值会将元素从默认导航中删除 流程(即用户无法对其进行切换)，但允许其接收 程序化焦点，这意味着可以通过链接或通过它来设置焦点 脚本.**对于不应该使用的元素，这可能非常有用. 标签，但可能需要将重点放在他们身上.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.

一个很好的例子是模式对话框窗口-打开时，焦点应放在 设置为对话框，以便屏幕阅读器开始阅读，并且 键盘将开始在对话框中导航.因为对话框 (可能只是一个<div>元素)在默认情况下无法聚焦，因此分配 它tabindex =-1"允许在脚本设置焦点时使用脚本 被呈现.

A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.

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

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

因此，总而言之，如果要设置键盘标签启用的某些元素，则应将值更改为 0 .

So in summary, if you want to set certain element be enabled by the keyboard tab you should change the value to 0.

这篇关于如何使选项卡索引适用于下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！