-
Notifications
You must be signed in to change notification settings - Fork 244
Description
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.
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.