False positive for S1082 (Angular keyup.enter event not recognized)

Hello,

since a couple of days the HTML analysis of our Angular 17 application fails with an unfulfilled S1082 Mouse events should have corresponding keyboard events concerning interactive <div> elements:

<div role="button"
    tabindex="0"
    (click)="clear()"
    (keyup.enter)="clear()"
    class="reset">
    Reset
</div>

SonarLint: Add a ‘onKeyPress|onKeyDown|onKeyUp’ attribute to this div tag.

In our case however there is a corresponding keyboard event (keyup.enter) to the mouse click-event, but it seems like it isn’t recognized by Sonar. While changing it to keydown.enter solves the Sonar issue, it isn’t an option for us out of accessibility concerns. Using just keyup and checking the keyCode also seems to work, but we’d have to sacrifice a convenient framework feature and change our code in many components for it to work.

Has anyone experienced this issue and found a solution for it?

I just found this post: https://community.sonarsource.com/t/enhancement-to-rule-mouse-events-should-have-corresponding-keyboard-events/38979 which resulted in support for (keydown.enter) being added in 2021:

https://github.com/SonarSource/sonar-html/blob/423029a90fcbbd65b86d3b4e9c3e4bc686449a75/sonar-html-plugin/src/main/java/org/sonar/plugins/html/checks/sonar/MouseEventWithoutKeyboardEquivalentCheck.java#L31

If that’s the case, it’d be great if support for (keyup.enter) could be added also :slight_smile:

Hi,

I take it you’re seeing this in SonarLint? Could you share the flavor and version, please?

 
Thx,
Ann

Hi Ann,

sorry for the late response. We use SonarLint 10.3.0.77475 (IntelliJ)

Best regards,
Robert

Hi Robert,

We’ve released 10.5 recently. Could you upgrade and see if this is still replicable?

 
Thx,
Ann

Hi Ann,

I just tested it with 10.5.0.78839. Sadly, we still get the same error :frowning:

We use following workaround to pass the analysis, but it’d be great if we could directly use the Angular feature instead:

(keyup)="$event.key === 'Enter' ? clear() : null"
1 Like

Hi,

Thanks for checking. I’ve flagged this for the language experts.

 
Ann

1 Like

Hi Robert,
Thank you for reporting this. We created a task to track this [SONARHTML-251] - Jira

Best,
Michal

1 Like

From the point of view of accessibility, any component with role=button must be usable with both Enter and Space, just like a regular HTML button. (A screen reader user doesn’t hear the difference between a regular HTML button and <div role=button>, so behaviour must be consistent.)
Does the Sonar issue go away when you add a listener for Space?

Hey, I just tried adding (keyup.space) to the div and the Sonar issue is still there.