Skip to main content

a11y/noPositiveTabindex

enforce tabIndex value is not greater than zero

ESLint Equivalent: tabindex-no-positive

Examples

Invalid

<span tabindex="1">foo</span>

 file.html:1:6 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Avoid positive integer values for the tabIndex attribute.

    <span tabindex="1">foo</span>
          ^^^^^^^^^^^^

  Elements with a positive tab index override natural page content
    order. This causes elements without a positive tab index to come last
    when navigating using a keyboard.

  Safe fix

    1  - <span·tabindex="1">
      1+ <span>
    2 2  foo
    3 3  </span>

<span tabIndex='5'>foo</span>

 file.tsx:1:6 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Avoid positive integer values for the tabIndex attribute.

    <span tabIndex='5'>foo</span>
          ^^^^^^^^^^^^

  Elements with a positive tab index override natural page content
    order. This causes elements without a positive tab index to come last
    when navigating using a keyboard.

  Safe fix

    1  - <span·tabIndex="5">
      1+ <span>
    2 2  foo
    3 3  </span>


<span tabIndex={5}>foo</span>

 file.tsx:1:6 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Avoid positive integer values for the tabIndex attribute.

    <span tabIndex={5}>foo</span>
          ^^^^^^^^^^^^

  Elements with a positive tab index override natural page content
    order. This causes elements without a positive tab index to come last
    when navigating using a keyboard.

  Safe fix

    1  - <span·tabIndex={5}>
      1+ <span>
    2 2  foo
    3 3  </span>


<span tabIndex={'5'}>foo</span>

 file.tsx:1:6 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Avoid positive integer values for the tabIndex attribute.

    <span tabIndex={'5'}>foo</span>
          ^^^^^^^^^^^^^^

  Elements with a positive tab index override natural page content
    order. This causes elements without a positive tab index to come last
    when navigating using a keyboard.

  Safe fix

    1  - <span·tabIndex={"5"}>
      1+ <span>
    2 2  foo
    3 3  </span>

Valid

<span tabindex="0">baz</span>
<span tabindex="-1">baz</span>
<span tabIndex={0}>baz</span>
<span tabIndex={-1}>baz</span>
<span tabIndex='-1'>baz</span>
<span tabIndex='0'>baz</span>
<span tabIndex={dynamic}>baz</span>
<span tabIndex={undefined}>baz</span>