8000 [interactive-supports-focus] allow specifying directives in allowList · Issue #1996 · angular-eslint/angular-eslint · GitHub
[go: up one dir, main page]
Skip to content

[interactive-supports-focus] allow specifying directives in allowList #1996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
2 tasks
forivall opened this issue Aug 16, 2024 · 3 comments
Open
2 tasks

[interactive-supports-focus] allow specifying directives in allowList #1996

forivall opened this issue Aug 16, 2024 · 3 comments
Labels
enhancement New feature or request package: eslint-plugin-template Angular Template rules PRs Welcome If a high-quality PR is created for this it will be accepted

Comments

@forivall
Copy link
forivall commented Aug 16, 2024 •
edited
Loading

Description and reproduction of the issue

Some directives provide the accessibility features that are otherwise reported by interactive-supports-focus and click-events-have-key-events. It should be possible to allowlist elements with these directives.

{
  "rules": {
    "@angular-eslint/template/click-events-have-key-events": [
      "error",
      {
        "allowList": [
          "[mat-tab-link]"
        ]
      }
    ],
    "@angular-eslint/template/interactive-supports-focus": [
      "error",
      {
        "allowList": [
          "[mat-tab-link]"
        ]
      }
    ]
  }
}

(based on "Tabs and navigation" example)

<nav mat-tab-nav-bar [backgroundColor]="background">
  <a
    mat-tab-link
    *ngFor="let link of links"
    (click)="activeLink = link"
    [active]="activeLink == link"
  >
    {{link}}
  </a>
  <a mat-tab-link disabled>Disabled Link</a>
</nav>

Versions

package version
@angular-eslint/eslint-plugin-template 17.5.2
@angular-eslint/template-parser 17.5.2
@typescript-eslint/parser 5.62.0
ESLint 8.57.0
node 20.13.1 
# Please run `npx ng version` in your project and paste the full output here:
Angular CLI: 17.3.8
Node: 20.13.1
Package Manager: npm 10.5.2
OS: darwin arm64

Angular: 17.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cdk                    17.3.10
@angular/cli                    17.3.8
@angular/material               17.3.10
@schematics/angular             16.2.10
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.13.3

This is a feature request for something that is not supported by the latest version, and I cannot upgrade versions in the project, so this is not really applicable

  • 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.
@forivall forivall added package: eslint-plugin-template Angular Template rules triage This issue needs to be looked at and categorized by a maintainer labels Aug 16, 2024
@forivall forivall changed the title [rulename] issue title [interactive-supports-focus] allow specifying directives in allowList Aug 16, 2024
@jelledijkstra97
Copy link

+1

The '@angular-eslint/template/interactive-supports-focus' rule supports the allowList option but '@angular-eslint/template/click-events-have-key-events' does not.

Can the allowList option be added to the click-events rule?

@JamesHenry
Copy link
Member

Thanks I'd happily accept a PR for this.

It's a very similar discussion as here: #2193 (comment)

...in terms of what to call things. allowList seems a little too vague to me I think...

Please join in the discussion as I think it could form a mini standard across all these rules

@JamesHenry JamesHenry mentioned this issue Mar 8, 2025
Closed
@JamesHenry JamesHenry added PRs Welcome If a high-quality PR is created for this it will be accepted enhancement New feature or request and removed triage This issue needs to be looked at and categorized by a maintainer labels Mar 8, 2025
@jelledijkstra97 jelledijkstra97 mentioned this issue Apr 10, 2025
Open
@lucasousi
Copy link

@JamesHenry The same issue occurs for <div role="button" (click)="doSomething())></div>. The lint warning appears (click-events-have-key-events), but if you put (keydown.space)="doSomething()" and (keydown.enter)="doSomething()", the event will be executed twice because role="button" already handles those cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request package: eslint-plugin-template Angular Template rules PRs Welcome If a high-quality PR is created for this it will be accepted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@forivall @JamesHenry @lucasousi @jelledijkstra97
0