Skip to main content

a11y/noNoninteractiveTabindex

MISSING DOCUMENTATION

Examples

Invalid

<div tabIndex="0" ></div>

 file.tsx:1:5 lint/a11y/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Do not use tabIndex on an element that is not interactive.

    <div tabIndex="0" ></div>
         ^^^^^^^^^^^^

  Adding non-interactive elements to the keyboard navigation flow can
    confuse users.


<div role="article" tabIndex="0" ></div>

 file.tsx:1:5 lint/a11y/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Do not use tabIndex on an element that is not interactive.

    <div role="article" tabIndex="0" ></div>
         ^^^^^^^^^^^^^^

  Adding non-interactive elements to the keyboard navigation flow can
    confuse users.


<article tabIndex={0} />

 file.tsx:1:9 lint/a11y/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Do not use tabIndex on an element that is not interactive.

    <article tabIndex={0} />
             ^^^^^^^^^^^^

  Adding non-interactive elements to the keyboard navigation flow can
    confuse users.

<div tabindex="0" ></div>

 file.html:1:5 lint/a11y/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━

  Do not use tabIndex on an element that is not interactive.

    <div tabindex="0" ></div>
         ^^^^^^^^^^^^

  Adding non-interactive elements to the keyboard navigation flow can
    confuse users.


<div role="article" tabindex="0" ></div>

 file.html:1:5 lint/a11y/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━

  Do not use tabIndex on an element that is not interactive.

    <div role="article" tabindex="0" ></div>
         ^^^^^^^^^^^^^^

  Adding non-interactive elements to the keyboard navigation flow can
    confuse users.

Valid

<button tabIndex="0" ></button>
<span role="button" tabIndex="0" ></span>
<span role="article" tabIndex="-1" ></span>
<MyButton tabIndex={0} />
<article tabIndex="-1"></article>
<div tabIndex="-1" ></div>
<article tabIndex={-1}></article>
<div tabIndex={-1} ></div>
<div></div>
<button tabIndex="-1"></button>
<button tabindex="0" ></button>
<span role="button" tabindex="0" ></span>
<span role="article" tabindex="-1" ></span>
<article tabindex="-1"></article>
<div tabindex="-1" ></div>
<div></div>
<button tabindex="-1"></button>