title: How can I make Tab-key navigation work with popups?
body: <p>I'm struggling with making a navigation keyboard-accessible, so that the user can <kbd>Tab</kbd> through the links. The problem is with popups that will be shown next to a menu item once it is focused or hovered. Here's a minimal working example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a.help {
      /* don't show help until explicitly triggered */
      display: none;
  }
  li:hover + a.help, a:focus + a.help {
      /* show help button when user is about to interact with the original button */
      display: inline;
  }
  a.help:focus, a.help:hover, a.help:active {
      /* don't hide help button while user interacts with it */
      display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Actions&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt; &lt;a class="help" href="#"&gt;(Help)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Delete&lt;/a&gt; &lt;a class="help" href="#"&gt;(Help)&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Firefox 45, when Focus is on "Edit" and its "(Help)" is visible, the next <kbd>Tab</kbd> will not focus anything, but the "(Help)" vanishes. The next <kbd>Tab</kbd> will then move to "Delete".</p>
  
  <p>In Chrome 49, it's even worse. When focus is on "Edit", the next <kbd>Tab</kbd> will not focus anything, and in fact restart the navigation at the page's first link upon the next <kbd>Tab</kbd>.</p>
  
  <p>Is there any way that I can make this work while retaining the general style and document structure?</p>