title: Modal with tabindex="-1" gets focus on tab
body: <p>I'm working with Twitter Bootstrap at the moment, and I'm encountering a strange problem in the tabindex of a modal:</p>
  
  <p>I'm trying to tab through the form elements inside the modal, but after the last button the focus disappeared before coming back to the close button. I added a line in console that logs which element is being focused, and it turned out to be the modal itself, even though it has <code>tabindex="-1"</code>.  </p>
  
  <p>I'm unable to share my code, but a quick look at the Bootstrap docs told me that it also happens in their example modal. The problem is reproducable:</p>
  
  <ol>
  <li>Visit <a href="http://getbootstrap.com/2.3.2/javascript.html#modals">http://getbootstrap.com/2.3.2/javascript.html#modals</a></li>
  <li>Open the demo modal ("Launch Demo Modal" button)</li>
  <li>Tab through the fields. You'll lose focus after "Save changes" before it comes back to the close button.</li>
  </ol>
  
  <p>Putting this in console will log whenever the modal (or in fact any element with <code>tabindex="-1"</code>) gains focus. </p>
  
  <pre><code>$('[tabindex="-1"]').focus(function(){
      console.log('Focus is on an element with negative tabindex')
  });
  </code></pre>
  
  <p>(It also logs it when you click on the modal obviously, but that's out of scope).</p>
  
  <p>Why does this happen? How can I prevent this? Is this a browser bug, a bug/feature of Twitter Bootstrap, or something else entirely?</p>