jsx_a11y/no-autofocus Correctness

🛠️ An auto-fix is available for this rule.

What it does

Enforce that autoFocus prop is not used on elements.

Why is this bad?

Autofocusing elements can cause usability issues for sighted and non-sighted users alike. It can be disorienting when focus is shifted without user input and can interfere with assistive technologies. Users should control when and where focus moves on a page.

Rule Option

This rule takes one optional object argument of type object:

{
  "rules": {
    "jsx-a11y/no-autofocus": [2, {
      "ignoreNonDOM": true
    }]
  }
}

For the ignoreNonDOM option, this determines if developer created components are checked.

Examples

Examples of incorrect code for this rule:

<div autoFocus />
<div autoFocus="true" />
<div autoFocus="false" />
<div autoFocus={undefined} />

Examples of correct code for this rule:

<div />;

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny jsx-a11y/no-autofocus --jsx-a11y-plugin

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-autofocus": "error"
  }
}

References

• Rule Source