ARIA hidden element must not be focusable or contain focusable elements

Fix the issue by ensuring the value inside each attribute is spelled correctly and corresponds to a valid value. Use appropriate ARIA roles, states, and properties.

The following examples PASS the aria-hidden="true" elements do not contain focusable elements rule:

• Content not focusable by default.

  <p aria-hidden="true">Some text</p>

• Content hidden through CSS.

  <div aria-hidden="true">
      <a href="/" style="display:none">Link</a>
  </div>

• Content made unfocusable through tabindex.

  <div aria-hidden="true">
  	<button tabindex="-1">Some button</button>
  </div>

• Content made unfocusable through disabled.

  <input disabled aria-hidden="true" />

• aria-hidden can’t be reset once set to true on an ancestor.

  <div aria-hidden="true">
      <div aria-hidden="false">
          <button tabindex="-1">Some button</button>
      </div>
  </div>

The following examples FAIL the aria-hidden="true" elements do not contain focusable elements rule:

• Focusable off screen link.

  <div aria-hidden="true">
  	<a href="/" style="position:absolute; top:-999em">Link</a>
  </div>

• Focusable form field, incorrectly disabled.

  <div aria-hidden="true">
  	<input aria-disabled="true" />
  </div>

• aria-hidden can’t be reset once set to true on an ancestor.

  <div aria-hidden="true">
      <div aria-hidden="false">
          <button>Some button</button>
      </div>
  </div>

• Focusable content through tabindex.

  <p tabindex="0" aria-hidden="true">Some text</p>

• Focusable summary element.

  <details aria-hidden="true">
      <summary>Some button</summary>
      <p>Some details</p>
  </details>