The `autoFocus` attribute is found here, which can cause usa

Error message

The `autoFocus` attribute is found here, which can cause usability issues for sighted and non-sighted users.

What it means

This is the `jsx_a11y/no-autofocus` rule in oxlint. It fires when a JSX element carries the `autoFocus` prop (checked with `has_jsx_prop`/`has_jsx_prop_ignore_case`). Auto-focusing an element on load disorients both sighted users (unexpected focus jumps) and screen-reader users (context loss), so jsx-a11y flags it.

Source

Thrown at crates/oxc_linter/src/rules/jsx_a11y/no_autofocus.rs:22

};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;
use schemars::JsonSchema;
use serde::Deserialize;

use crate::{
    AstNode,
    context::LintContext,
    globals::HTML_TAG,
    rule::{DefaultRuleConfig, Rule},
    utils::{
        get_element_type, get_string_literal_prop_value, has_jsx_prop, has_jsx_prop_ignore_case,
    },
};

fn no_autofocus_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("The `autoFocus` attribute is found here, which can cause usability issues for sighted and non-sighted users.")
        .with_help("Remove the `autoFocus` attribute.")
        .with_label(span)
}

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[serde(default, deny_unknown_fields)]
pub struct NoAutofocus {
    /// Determines if developer-created components are checked.
    #[serde(rename = "ignoreNonDOM")]
    ignore_non_dom: bool,
}

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Enforce that `autoFocus` prop is not used on elements.
    ///
    /// ### Why is this bad?

View on GitHub (pinned to e1e7af627c)

Solutions

Remove `autoFocus` and focus programmatically only when appropriate (e.g., focus the first field of a modal the user just opened, using a ref).
For modals, rely on focus-trap/focus-management libraries instead of `autoFocus`.
Set `ignoreNonDOM: true` in the rule config if you only want native HTML elements checked (or the reverse if you use `ignoreNonDOM` semantics differently).
Disable inline for a rare, deliberate auto-focus case.

Example fix

// before
<input autoFocus onChange={...} />

// after
const ref = useRef<HTMLInputElement>(null);
useEffect(() => { ref.current?.focus(); }, []);
<input ref={ref} onChange={...} />

Defensive patterns

Strategy: validation

Validate before calling

npx oxlint --jsx-a11y/no-autofocus src/

Prevention

Use refs + useEffect to focus deliberately, only after user-initiated context changes.
Rely on focus-trap libraries for modals instead of autoFocus.
Decide the ignoreNonDOM setting up front so custom components are handled consistently.

When it happens

Trigger: Any JSX element with an `autoFocus` attribute. By default only known HTML elements (checked against the `HTML_TAG` globals set) are validated; the `ignoreNonDOM` option (serde `ignoreNonDOM`, default false) controls whether custom components are also flagged.

Common situations: Login or search forms that auto-focus the first input; modal dialogs focusing their content; copying old HTML patterns into React; enabling the jsx-a11y recommended preset and hitting dozens of legacy `autoFocus` usages.

Related errors

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/40f8833d14836866. Report an issue: GitHub.