Как сделать вкладку указателем для выпадающих списков?

Question

У меня есть заголовок с компонентом dropstrap dropdown, и я пытаюсь включить навигацию по клавиатуре к этому элементу с помощью 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 или диапазоном с помощью справочного меню класса и выпадающего списка, текст справки получает фокус на вкладке. Несмотря на то, что это делает фокус, я не вижу раскрывающегося списка при входе или пробеле или стрелке вниз.

Я действительно не уверен, как это сделать. Я пытался понять это, но я потерпел неудачу.

Отсутствует какая-либо основная концепция tabindex здесь. Может ли кто-нибудь помочь мне или указать мне в правильном направлении.

Большое спасибо.

Cheers.

Answer 1

Атрибут tabindex явно определяет порядок навигации для элементов с возможностью фокусировки (как правило, ссылок и элементов управления формой) на странице. Он также может использоваться для определения того, должны ли элементы фокусироваться или нет нет.

[Both] tabindex = "0" и tabindex = "- 1" имеют особое значение и предоставляют различные функциональные возможности в HTML. Значение 0 указывает, что элемент должен быть помещен в навигационный порядок по умолчанию. Это позволяет использовать элементы , которые не являются наводчивыми (например, <div>, <span> и <p>) для получения фокуса клавиатуры. Разумеется, обычно нужно использовать ссылки и элементы формы для всех интерактивных элементов, но это делает , чтобы другие элементы могли быть сфокусированы и взаимодействовать с триггером.

TabIndex = - значение «1» удаляет элемент из потока навигации по умолчанию (то есть, пользователь не может вкладка к нему), но он позволяет получить программную направленность, то есть фокус может быть установлен на него от ссылки или с помощью скриптов . ** Это может быть очень полезно для элементов, которые не должны быть привязаны к , но для них может потребоваться установить фокус.

Хорошим примером является модальное диалоговое окно - при открытии фокус должен быть установлен на в диалоговом окне, после чего начнет считываться устройство чтения с экрана, а клавиатура начнет навигацию в диалоговом окне. Поскольку диалог (возможно, только элемент <div>) по умолчанию не настраивается, назначая , он tabindex = "- 1" позволяет настроить фокус на него со сценарием, когда он представлен .

Значение -1 также может быть полезно в сложных виджетов и меню, которые использовать клавиши со стрелками или другие сочетания клавиш, чтобы гарантировать, что только один элемент внутри виджета судоходна с помощью клавиши табуляции, но по-прежнему позволяют фокус быть установленным на других компонентах виджета.

Таким образом, в общем, если вы хотите установить определенный элемент будет включен в закладке клавиатуры вы должны изменить значение .