noAutofocus

Ta treść nie jest jeszcze dostępna w Twoim języku.

JSX and TSX

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

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noAutofocus": "error"
6
      }
7
    }
8
  }
9
}

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

Invalid

1
<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·/>
      │        ----------

1
<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”·/>
      │        -----------------

1
<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”}·/>
      │        --------------------

1
<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}·/>
      │        ----------------------

Valid

1
<input />

1
<div />

1
<button />

1
// `autoFocus` prop in user created component is valid
2
<MyComponent autoFocus={true} />

1
// `autoFocus` prop in element has `popover` attribute is valid
2
<div popover><input autoFocus /></div>

1
// `autoFocus` prop in `dialog` is valid
2
<dialog><input autoFocus /></dialog>