jsx-a11y/no-autofocus Correctness
What it does
Enforce that autoFocus prop is not used on elements.
Why is this bad?
Autofocusing elements can cause usability issues for sighted and non-sighted users alike. It can be disorienting when focus is shifted without user input and can interfere with assistive technologies. Users should control when and where focus moves on a page.
Exceptions
<dialog> elements, elements with role="dialog", and elements with the popover attribute (and their descendants) are exempt, since directing focus into them when opened is the expected behavior. See MDN: <dialog> accessibility.
Examples
Examples of incorrect code for this rule:
<div autoFocus />
<div autoFocus="true" />
<div autoFocus="false" />
<div autoFocus={undefined} />Examples of correct code for this rule:
<div />
<dialog><input autoFocus /></dialog>
<div role="dialog"><input autoFocus /></div>
<div popover><input autoFocus /></div>Configuration
This rule accepts a configuration object with the following properties:
ignoreNonDOM
type: boolean
default: false
Determines if developer-created components are checked.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/no-autofocus": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/no-autofocus": "error",
},
});oxlint --deny jsx-a11y/no-autofocus --jsx-a11y-pluginVersion
This rule was added in v0.0.19.