title: Prevent background items from receiving focus while modal overlay is covering them?
body: <p>I am working on making an overlay modal more accessible. It works essentially like <a href="https://jsfiddle.net/0dzcs30n/8/" rel="noreferrer">this JSFiddle</a>. When you open the modal, the focus doesn't properly go into the modal, and it continues to focus on other (hidden, background) items in the page.</p>
  
  <p>You can see in my JSFiddle demo that I have already used <code>aria-controls</code>, <code>aria-owns</code>, <code>aria-haspopup</code> and even <code>aria-flowto</code>.</p>
  
  <pre><code>&lt;button 
    aria-controls="two" 
    aria-owns="true" 
    aria-haspopup="true"
    aria-flowto="two"
    onclick="toggleTwo();"
    &gt;
    TOGGLE DIV #2
  &lt;/button&gt;
  </code></pre>
  
  <p>However, while using MacOS VoiceOver, none of these do what I intend (though VoiceOver does respect the <code>aria-hidden</code> that I set on div <code>two</code>).</p>
  
  <p>I know that I could manipulate the <code>tabindex</code>, however, values above 0 are bad for accessibility, so my only other option would be to manually find <em>all</em> focusable elements on the page and set them to <code>tabindex=-1</code>, which is not feasible on this large, complicated site. </p>
  
  <p>Additionally, I've looked into manually intercepting and controlling tab behavior with Javascript, so that the focus is moved into the popup and wraps back to the top upon exiting the bottom, however, this has interfered with accessibility as well. </p>