How to make tab index work for dropdowns?
<p>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:</p>

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

<p>CSS: </p>

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

<p>Here is the Fiddle <a href="https://jsfiddle.net/ShellZero/nv4w2owc/22/" rel="noreferrer">link</a> </p>

<p>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. </p>

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

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

<p>Thanks a lot.</p>

<p>Cheers.</p>