org.sonar.l10n.javascript.rules.javascript.S6841.html Maven / Gradle / Ivy
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 (
<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
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 - tabindex
- WCAG - Focus Order