src/content/docs/linter/rules/no-autofocus.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/noAutofocus`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/no-autofocus`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-autofocus.md){
"linter": {
"rules": {
"a11y": {
"noAutofocus": "error"
}
}
}
}
Enforce that autoFocus prop is not used on elements.
Autofocusing elements can cause usability issues for sighted and non-sighted users, alike. But the autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog or popover.
<input autoFocus />
<input autoFocus="true" />
<input autoFocus={"false"} />
<input autoFocus={undefined} />
<input />
<div />
<button />
// `autoFocus` prop in user created component is valid
<MyComponent autoFocus={true} />
// `autoFocus` prop in element has `popover` attribute is valid
<div popover><input autoFocus /></div>
// `autoFocus` prop in `dialog` is valid
<dialog><input autoFocus /></dialog>
{
"linter": {
"rules": {
"a11y": {
"noAutofocus": "error"
}
}
}
}
Enforce that the autofocus attribute is not used on elements.
Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.
However, the autofocus attribute is allowed on elements inside a dialog element or
elements with a popover attribute, as these are modal contexts where autofocus is expected.
<input autofocus />
<input autofocus="true" />
<textarea autofocus>content</textarea>
<input />
<div popover><input autofocus /></div>
<dialog><input autofocus /></dialog>