Pseudo events not supported with accessibility rule

[edbzn]

Describe the bug

Hi, I would like to use accessibility rules as described here but they don't support pseudo events.

Context and configuration

Please share:

• Which rule is causing the problem: template-click-events-have-key-events

Expected behavior

Support of pseudo events for accessibility rules.

Code

<a *ngFor="let name of groupNames"
    [class.selected]="name == selectedGroup.name"
    class="button mat-button filter-button"
    (click)="selectGroup(name)"
    (keyup.enter)="selectGroup(name)">{{name}}</a>

[lazarljubenovic]

Since we're talking about accessibility, that thing's supposed to be a button, not an anchor.

[edbzn]

@lazarljubenovic In this case selectGroup(name) does a redirection using the PlatformLocation API. IMO the <a> element is appropriate.

[lazarljubenovic]

It's an anchor tag without href, which means it's a "placeholder for a link". Things like "Open in new tab" won't work. You should pre-compute the URL and then use routerLink.

[edbzn]

@lazarljubenovic Ok noted, thanks for the advice.

However it doesn't resolve the main problem with pseudo events. Here is an other example without link element :

<div class="card-front" (click)="flipCard(person)" (keyup.enter)="flipCard(person)">
  <h3>{{person.name}}</h3>
</div>

The rule should cover this case as described here.

A non-interactive element that has a click event, should be accompanied by one of the key events (keyup, keydown or keypress)

But it fails when using pseudo events.

[lazarljubenovic]

Yeah, sorry for side-tracking the topic 🙏 You're completely correct that it's a bug (or, well, a missing feature) in Codelyzer.

[mgechev]

@mohammedzamakhan do you think you can alter the rule template-click-events-have-key-events so we can handle this case?

[mohammedzamakhan]

yes we can update it to handle it, I will take a look into it

[edbzn]

Fixed in #893