jsx-a11y/interactive-supports-focus Correctness
What it does
Enforce that elements with interactive roles and interaction handlers (mouse or key press) must be focusable.
Why is this bad?
Elements that handle user interaction (e.g., onClick) but are not natively focusable (like <div> or <span>) must be made focusable so that keyboard-only users and assistive technology users can reach and activate them.
Without a tabIndex, these elements are unreachable via keyboard navigation, creating a barrier for users who cannot use a mouse.
Examples
Examples of incorrect code for this rule:
<span onClick={submitForm} role="button">Submit</span>
<a onClick={showNextPage} role="button">Next page</a>Examples of correct code for this rule:
<div aria-hidden onClick={() => void 0} />
<span onClick={doSomething} tabIndex={0} role="button">Click me!</span>
<span onClick={doSomething} tabIndex={-1} role="menuitem">Click me too!</span>
<a href="javascript:void(0);" onClick={doSomething}>Click ALL the things!</a>
<button onClick={doSomething}>Click the button :)</button>Configuration
This rule accepts a configuration object with the following properties:
tabbable
type: string[]
default: ["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]
An array of interactive ARIA roles that should be considered tabbable (require tabIndex={0}). Interactive roles not in this list are only required to be focusable (tabIndex={-1} is sufficient). Defaults to ["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"].
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/interactive-supports-focus": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/interactive-supports-focus": "error",
},
});oxlint --deny jsx-a11y/interactive-supports-focus --jsx-a11y-pluginVersion
This rule was added in v1.63.0.