== Why is this an issue?

Positive ``++tabIndex++`` values can disrupt the natural tab order of the webpage. This can be confusing for screen reader users who rely on a logical tab order to navigate through the content. If the tab order doesn't match the visual or logical order of elements, users may struggle to understand the page structure.

Therefore, it's recommended to avoid using positive ``++tabIndex++`` values.

== How to fix it

If you need to make an element focusable that isn't by default (like a ``++<div>++`` or ``++<span>++``), you can use ``++tabIndex="0"++``. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the ``++tabIndex++`` value or use ``++tabIndex="-1"++`` to remove the element from the tab order.

=== Code examples

==== Noncompliant code example

[source,javascript,diff-id=1,diff-type=noncompliant]
----
function MyDiv() {
    return (
        <div>
            <span tabIndex="5">foo</span> // Noncompliant
            <span tabIndex="3">bar</span> // Noncompliant
            <span tabIndex="1">baz</span> // Noncompliant
            <span tabIndex="2">qux</span> // Noncompliant
        </div>
    );
}
----

==== Compliant solution

[source,javascript,diff-id=1,diff-type=compliant]
----
function MyDiv() {
    return (
        <div>
            <span tabIndex="0">foo</span>
            <span tabIndex="-1">bar</span>
            <span tabIndex={0}>baz</span>
            <span>qux</span>
        </div>
    );
}
----

== Resources
=== Documentation

* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/focus-order[Focus Order]
