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

Clean Code New rules / language support
,
1

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?

2

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:

3

Hi,

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

 
Thx,
Ann

4

Hi Ann,

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

Best regards,
Robert

5

Hi Robert,

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

 
Thx,
Ann

6

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
7

Hi,

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

 
Ann

1 Like