Skip to content

[no-autofocus] Ignore autofocus on native dialog element and its descendants #2635

@TomSchrier

Description

@TomSchrier

Description and reproduction of the issue

I am building a component that uses the native <dialog> element. While reading the docs on MDN, I noticed the following about using the autofocus attribute on the dialog:

The autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog. If no other element involves more immediate interaction, it is recommended to add autofocus to the close button inside the dialog, or the dialog itself if the user is expected to click/activate it to dismiss.

And...

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.

However, when I add autofocus to my dialog’s close button, the [no-autofocus] linting rule flags it as an error:
The autofocus attribute should not be used, as it reduces usability and accessibility for users.

Feature Request
Would it be possible to extend the no-autofocus rule with an option to ignore descendants of the native <dialog> element? This would allow developers to follow MDN’s accessibility guidance for dialogs while still preventing misuse of autofocus in other contexts.

StackBlitz: https://stackblitz.com/edit/angular-eslint-repros-w9ju197m?file=src%2Fapp%2Fmy-dialog%2Fmy-dialog.component.html

Versions

package version
angular-eslint 20.2.0
@angular-eslint/builder 20.2.0
typescript-eslint 8.41.0
ESLint 9.34.0
node 22.16.0
# Please run `npx ng version` in your project and paste the full output here:
Angular CLI: 20.2.0
Node: 22.16.0
Package Manager: pnpm 10.13.1
OS: darwin arm64
    

Angular: 20.2.1
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.0
@angular-devkit/core         20.2.0
@angular-devkit/schematics   20.2.0
@angular/build               20.2.0
@angular/cdk                 20.2.0
@angular/cli                 20.2.0
@schematics/angular          20.2.0
rxjs                         7.8.2
typescript                   5.8.3
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions