Skip to content

linter: jsx-a11y/no-autofocus should not report autofocus inside dialogs and popovers #22287

@mehm8128

Description

@mehm8128

What version of Oxlint are you using?

latest

What command did you run?

No response

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

No response

What happened?

Currently, jsx-a11y/no-autofocus reports all autofocus attributes regardless of the element or context.
However, autofocus should be allowed inside dialogs and popovers because the focus does not move to the element until the dialog or popover is shown by user interaction.
In most cases, using autofocus within dialogs and popovers actually improves accessibility.

dialogs and popovers:

  • <dialog> element
  • role="dialog" attribute
  • popover attribute

This is described in the HTML Living Standard and on MDN.
HTML Living Standard

When the autofocus attribute is specified on an element inside dialog elements or HTML elements whose popover attribute is set, then it will be focused when the dialog or popover becomes shown.

MDN

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a <dialog>, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog.

This is not implemented in the original rule, but I believe we should consider this specific scenario.

playground

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions