noAutofocus
Ce contenu n’est pas encore disponible dans votre langue.
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/noAutofocus - This rule is recommended, which means is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is error.
- Sources:
- Same as
jsx-a11y/no-autofocus
- Same as
Description
Section titled “Description”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.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<input autoFocus />code-block.jsx:1:8 lint/a11y/noAutofocus FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid the autoFocus attribute.
> 1 │ <input autoFocus />
│ ^^^^^^^^^
2 │
ℹ Unsafe fix: Remove the autoFocus attribute.
1 │ <input·autoFocus·/>
│ ----------
<input autoFocus="true" />code-block.jsx:1:8 lint/a11y/noAutofocus FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid the autoFocus attribute.
> 1 │ <input autoFocus=“true” />
│ ^^^^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Remove the autoFocus attribute.
1 │ <input·autoFocus=“true”·/>
│ -----------------
<input autoFocus={"false"} />code-block.jsx:1:8 lint/a11y/noAutofocus FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid the autoFocus attribute.
> 1 │ <input autoFocus={“false”} />
│ ^^^^^^^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Remove the autoFocus attribute.
1 │ <input·autoFocus={“false”}·/>
│ --------------------
<input autoFocus={undefined} />code-block.jsx:1:8 lint/a11y/noAutofocus FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid the autoFocus attribute.
> 1 │ <input autoFocus={undefined} />
│ ^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Unsafe fix: Remove the autoFocus attribute.
1 │ <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>Resources
Section titled “Resources”- WHATWG HTML Standard, The autofocus attribute
- The accessibility of HTML 5 autofocus
- MDN Web Docs, HTMLElement: autofocus property
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "noAutofocus": "error" } } }}