no-aria-hidden-on-focusable

Enforce that aria-hidden="true" is not set on focusable elements or parent of focusable elements.

aria-hidden="true" can be used to hide purely decorative content from screen reader users. An element with aria-hidden="true" that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using aria-hidden="true" on focusable elements.

See more in WAI-ARIA Use in HTML.

✔ Succeed

<template>
  <button>Press Me</button>
</template>

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

<template>
    <div aria-hidden='true'><span>Some text</div></div>
</template>

<template>
  <button tabindex="-1" aria-hidden="true">Press</button>
</template>

<template>
  <div aria-hidden="true"><a href="#" tabindex="-1">Link</a></div>
</template>

<template>
  <div aria-hidden="true"><span>Some text</span></div>
</template>

❌ Fail

<template>
  <button aria-hidden="true">press me</button>
</template>

<template>
  <button aria-hidden="true">press me</button>
</template>

<template>
  <a href="#" aria-hidden="true">press me</a>
</template>

<template>
  <div aria-hidden="true">
    <button>press me</button>
  </div>
</template>

<template>
  <span tabindex="0" aria-hidden="true"><em>Icon</em></span>
</template>