no-role-presentation-on-focusable

Enforce that role="presentation" is not set on focusable elements or parent of focusbale elements.

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

See more in WAI-ARIA Use in HTML.

✔ Succeed

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

<template>
  <div role="presentation"><button tabindex="-1">Submit</button></div>
</template>

<template>
    <div role="presentation"><span>Some text</div></div>
</template>

<template>
  <button tabindex="-1" role="presentation">Press</button>
</template>

<template>
  <div role="presentation"><a href="#" tabindex="-1">Link</a></div>
</template>

<template>
  <div role="presentation"><span>Some text</span></div>
</template>

❌ Fail

<template>
  <button role="presentation">press me</button>
</template>

<template>
  <button role="presentation">press me</button>
</template>

<template>
  <a href="#" role="presentation">press me</a>
</template>

<template>
  <div role="presentation">
    <button>press me</button>
  </div>
</template>

<template>
  <span tabindex="0" role="presentation"><em>Icon</em></span>
</template>