title: Aria-hidden=true on parent does not make its children also aria-hidden
body: <p>I am reading a bit on aria uses, and came across this piece of documentation:<a href="https://w3c.github.io/using-aria/#fourth" rel="noreferrer">Fourth Rule of ARIA Use</a>. One part that is not clear to me is this: </p>
  
  <blockquote>
    <p>"Applying aria-hidden to a parent/ancestor of a visible interactive
    element will also result in the interactive element being hidden,"</p>
  </blockquote>
  
  <p>I tried the following snippet, but the anchor tag is still accessible (even though I put an aria-hidden on its parent). What am I missing here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
    background-color: #333;
    height: 100%;
  }
  
  #main {
    margin: 0 auto;
    width: 80%;
    background-color: #fff;
    height: 100%;
    padding: 50px;
  }
  
  .test {
    border: 1px solid #555;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    &lt;div tabindex="0"&gt;Woohoo&lt;/div&gt;
    &lt;div class="test" aria-hidden="true" role="presentation"&gt;
      &lt;div class="one" aria-hidden="true"&gt;
          &lt;span aria-hidden="true"&gt;
            &lt;a href="#"&gt;Testing&lt;/a&gt;
          &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>