Skip to main content

a11y/noAUtofocus

It discourages the usage to the attribute autoFocus on elements. This practice could cause issues for sighted and non-sighted users.

Accessibility guidelines

General best practice (reference resources)

Resources

ESLint Equivalent: no-autofocus

Examples

Invalid

<input autoFocus />

 file.tsx:1:7 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the autoFocus attribute.

    <input autoFocus />
           ^^^^^^^^^

  Automatically focusing elements overrides natural page content focus
    order, causing issues for keyboard-only navigation.

  Safe fix

  - <input·autoFocus·/>
  + <input·/>


<input autoFocus='true' />

 file.tsx:1:7 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the autoFocus attribute.

    <input autoFocus='true' />
           ^^^^^^^^^^^^^^^^

  Automatically focusing elements overrides natural page content focus
    order, causing issues for keyboard-only navigation.

  Safe fix

  - <input·autoFocus="true"·/>
  + <input·/>


<input autoFocus={"false"} />

 file.tsx:1:7 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the autoFocus attribute.

    <input autoFocus={"false"} />
           ^^^^^^^^^^^^^^^^^^^

  Automatically focusing elements overrides natural page content focus
    order, causing issues for keyboard-only navigation.

  Safe fix

  - <input·autoFocus={"false"}·/>
  + <input·/>

<input autofocus />

 file.html:1:7 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the autoFocus attribute.

    <input autofocus />
           ^^^^^^^^^

  Automatically focusing elements overrides natural page content focus
    order, causing issues for keyboard-only navigation.

  Safe fix

  - <input·autofocus·/>
  + <input·/>

Valid

<input />
<input autoFocus={undefined} />
<Input autoFocus={"false"} />
<input />