noAutofocus (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/noAutofocus
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/no-autofocus

How to configure

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

Description

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.

Examples

Invalid

1
<input autofocus />

code-block.html:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This element uses the autofocus attribute outside an allowed modal context.
  
  > 1 │ <input autofocus />
      │        ^^^^^^^^^
    2 │ 
  
  ℹ Autofocusing elements can disrupt navigation and confuse screen reader and keyboard users.
  
  ℹ Unsafe fix: Remove the autofocus attribute.
  
    1 │ <input·autofocus·/>
      │        ----------

1
<input autofocus="true" />

code-block.html:1:8 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This element uses the autofocus attribute outside an allowed modal context.
  
  > 1 │ <input autofocus="true" />
      │        ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Autofocusing elements can disrupt navigation and confuse screen reader and keyboard users.
  
  ℹ Unsafe fix: Remove the autofocus attribute.
  
    1 │ <input·autofocus="true"·/>
      │        -----------------

1
<textarea autofocus>content</textarea>

code-block.html:1:11 lint/a11y/noAutofocus  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This element uses the autofocus attribute outside an allowed modal context.
  
  > 1 │ <textarea autofocus>content</textarea>
      │           ^^^^^^^^^
    2 │ 
  
  ℹ Autofocusing elements can disrupt navigation and confuse screen reader and keyboard users.
  
  ℹ Unsafe fix: Remove the autofocus attribute.
  
    1 │ <textarea·autofocus>content</textarea>
      │           ---------

Valid

1
<input />

1
<div popover><input autofocus /></div>

1
<dialog><input autofocus /></dialog>