title: How to make divs navigable by tab/down?
body: <p><img src="https://i.stack.imgur.com/yvqtx.png" alt="enter image description here"></p>
  
  <p>In this example, I type in <code>java</code> and I hit tab/down, and I can start navigating the results. Its also sane as I can select the text and open the <code>learn more</code> link.</p>
  
  <p>I want to make an autosuggest like this. <strong>How do I</strong> make it keyboard navigable as:</p>
  
  <ol>
  <li>tab/down from textbox moves to first element</li>
  <li>tab/down from an element moves to next element</li>
  <li>up reverses both 1. and 2., you can move from an element to the textbox</li>
  </ol>
  
  <hr>
  
  <p>I have tried setting tabindex to a bunch of elements. I can make them selectable, once selected I can only navigate <strong>only</strong> by tab (in Firefox), no up or down, much less going back to the textbox.</p>
  
  <pre><code>&lt;textarea tabindex=1&gt;something&lt;/textarea&gt;
  &lt;ul&gt;
  &lt;li tabindex=1&gt;one item &lt;a href="google.com"&gt;and link&lt;/a&gt;&lt;/li&gt;
  &lt;li tabindex=1&gt;one item&lt;/li&gt;
  &lt;li tabindex=1 &gt;one item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I also need to lay out everything consecutively in the HTML, whereas I usually add popovers as the last element to the body and absolutely position them.</p>
  
  <p>I guess StackOverflow the site must be handling the tab, up and down keys and calculating which one gets focus; tabindex seems kinda limiting.</p>