Skip to content

ESLint warns about autofocus attribute on custom elements #1652

@pdesoyres-cc

Description

@pdesoyres-cc

Description

ESLint lit-a11y/no-autofocus rule warns when using the autofocus attribute directly on custom Lit components.

Context

When using autofocus as a boolean attribute on a custom element like <cc-input-text>:

<cc-input-text
  autofocus
  label="..."
>

ESLint complains because custom elements may not properly handle the native autofocus attribute.

Workaround

Use the property binding syntax instead:

<cc-input-text
  .autofocus=${true}
  label="..."
>

Or the boolean attribute binding:

<cc-input-text
  ?autofocus=${true}
  label="..."
>

Metadata

Metadata

Assignees

No one assigned

    Labels

    a11yRelated to accessibility

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions