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