Skip to main content

a11y/noNoninteractiveElementToInteractiveRole

non-interactive elements should not be assigned interactive roles

ESLint Equivalent: no-noninteractive-element-to-interactive-role

Examples

Invalid

<h1 role="checkbox"></h1>

 file.tsx:1:4 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━

  The HTML element h1 is non-interactive and should not have an
    interactive role.

    <h1 role="checkbox"></h1>
        ^^^^^^^^^^^^^^^

  Replace h1 with a div or a span.

<h1 role="checkbox"></h1>

 file.html:1:4 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━

  The HTML element h1 is non-interactive and should not have an
    interactive role.

    <h1 role="checkbox"></h1>
        ^^^^^^^^^^^^^^^

  Replace h1 with a div or a span.

Valid

<h1 role="article"></h1>
<h1 role="article"></h1>