jsx-a11y/no-autofocus

autoFocus moves focus as soon as the element renders. A screen reader starts reading at that element, so the user misses everything before it. On a phone, the keyboard opens and the page scrolls by itself.

autoFocus={false} isn't reported. Neither is autoFocus inside a <dialog>, an element with role="dialog", or an element with a popover attribute, because opening one of those is supposed to move focus.

--fix-suggestions removes the attribute.

Configure#

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/no-autofocus" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"jsx-a11y/no-autofocus" = ["error", {
  ignoreNonDOM = false,
}]

Examples#

const search = <input type="search" autoFocus />;

const search = <input type="search" />;

const rename = (
  <dialog open>
    <input type="text" autoFocus />
  </dialog>
);

Options#

const search = <SearchBox autoFocus />;

const search = <SearchBox autoFocus />;