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

function MyDiv() {
    return (
        
            foo // Noncompliant
            bar // Noncompliant
            baz // Noncompliant
            qux // Noncompliant
        
    );
}

Compliant solution

function MyDiv() {
    return (
        
            foo
            bar
            baz
            qux
        
    );
}

Resources

Documentation