title: How to make tabindex localized within a div
body: <p>I'm trying to make examples of what is bad practice in terms of accessibility. I have three examples that have to do with Keyboard Focus. The first example is that you aren't able to see focus on a set of buttons. The second example is that focus order isn't logical. In order to accomplish the second and third examples, I have to add in the tabindex attribute to some of the tags. </p>
  
  <p>I'm having a little trouble understanding how I might be able to tab through the first 4 buttons (in order), then move onto the form (in order of the first field, the submit, the third field, and then second field), and then finally onto a div of links (in order, but has a loop). </p>
  
  <p>What happens currently is, tabbing through the first 4 buttons works, but then focus goes to the url address bar and then onto the input fields. I want the focus order to go from div to div. I'll also note that this will be in a tabpanel on a website, so I want this to be pretty isolated.</p>
  
  <p>I hope that makes a little sense, I don't have too much experience in webdev. Here's the Codepen and html for reference! Thank you!</p>
  
  <p>Codepen: <a href="https://codepen.io/anon/pen/ZyaMrP" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZyaMrP</a></p>
  
  <pre><code>&lt;style&gt;
  button:focus {
    outline: none !important;
    text-decoration: none !important;
  }
  &lt;/style&gt;
  
  &lt;p&gt;Unfocusable buttons&lt;/p&gt;
  &lt;div class="buttons"&gt;
    &lt;button&gt;button 1&lt;/button&gt;
    &lt;button&gt;button 2&lt;/button&gt;
    &lt;button&gt;button 3&lt;/button&gt;
    &lt;button&gt;button 4&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Unintuitive Focus Order&lt;/p&gt;
  &lt;div class="inputs"&gt;
    &lt;form&gt;
      &lt;label&gt;input 1&lt;/label&gt;
      &lt;input type="text" tabindex="1"&gt;&lt;br&gt;
      &lt;label&gt;input 2&lt;/label&gt;
      &lt;input type="text" tabindex="4"&gt;&lt;br&gt;
      &lt;label&gt;input 3&lt;/label&gt;
      &lt;input type="text" tabindex="2"&gt;&lt;br&gt;
      &lt;input type="submit" value="Submit" tabindex="3"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Focus Trap (Loop)&lt;/p&gt;
  &lt;div class="links"&gt;
    &lt;a href="#" tabindex="5"&gt;link 1&lt;/a&gt;
    &lt;a href="#" tabindex="6"&gt;link 2&lt;/a&gt;
    &lt;a href="#" tabindex="7" onFocus="this.tabindex=4;" onBlur="this.tabindex=7;"&gt;link 3&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>