title: "aria-hidden elements do not contain focusable elements" issue when modal is shown
body: <p>I'm using <a href="https://github.com/reactjs/react-modal" rel="nofollow noreferrer">React Modal</a> in my application and when it is open running the <a href="https://www.deque.com/axe/" rel="nofollow noreferrer">aXe accessibility tool</a> gives the following error:</p>
  <p><a href="https://dequeuniversity.com/rules/axe/3.3/aria-hidden-focus" rel="nofollow noreferrer">aria-hidden elements do not contain focusable elements</a></p>
  <p>This is because the React modal adds a <code>aria-hidden=&quot;true&quot;</code> to the root element of the application (the div all my apps components are rendered under, but not the modal), but it does not update the tab index or disable every focusable element.</p>
  <p>However the React modal traps the keyboard focus, so the user can't tab out of the modal and clicking the background closes the modal.</p>
  <p>So my question is:</p>
  <p>Is this actually an issue I need to fix?
  Or is this a false positive as the tool doesn't have knowledge of the modal trapping focus?</p>
  <p>If this does need to be fixed, is my only option to manually update the tab index or disable every focusable element?</p>
  <p>Thanks!</p>
  <p>The HTML when the modal is open looks kinda like this:</p>
  <pre><code>&lt;div data-react-modal-body-trap=&quot;&quot; tabindex=&quot;0&quot; style=&quot;position: absolute; opacity: 0;&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;root&quot; aria-hidden=&quot;true&quot;&gt;application content&lt;/div&gt;
  &lt;div class=&quot;ReactModalPortal&quot;&gt;
      &lt;div class=&quot;ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay-6fODnA&quot;&gt;
          &lt;div tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;modal content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>