Question about rule 'Mouse events should have corresponding keyboard events'

(Nick) #1

SonarQube 7.7 Community, SonarHTML 3.2 (build1615)

<button class="btn btn-outline-danger" (click)="cancel()">Cancel</button>

Recently upgraded to 7.7 and now seeing the bug Web:MouseEventWithoutKeyboardEquivalentCheck reported for some of our Angular 5 modules. For example the code above resulted in the bug “Add a ‘onKeyPress’ attribute to this tag.” and reviewing, I find the suggested compliant solution

<a onClick="doSomething();" onKeyPress="doSomething();" ...> 

Is this rule valid for the given use case? Most (if not all) browsers already trigger the click event if the user hits the space-bar or enter key when focus is on a button. Further the suggested solution, if blindly followed would result in very unexpected behavior as the buttons are triggered when tabbing or arrowing around the page.

And finally, even if valid for vanilla JavaScript, is it still valid for an Angular implementation?

(Nicolas Harraudeau) #4

Hi Nick,

You are right that <button> elements should not raise any issue for the onclick attribute. Using onclick for this element is in fact recommended by WCAG2.

For anchors there is a small difference in that only the enter key triggers the onclick, not the space key. W3C recommends to remain consistent by adding an onkeypress handler for anchors. (See Example 1: Using Space to activate a button). But as WCAG2 actually recommends to just use onclick I will ask our designer and accessibility specialist what she thinks of this use case (@Laura).

As a side note, onkeypress is not triggered for arrows and tab keys, but you are right that the example should rather show that the function uses the keyboard event to filter other keys. The rule should also accept other attributes such as onkeydown and onkeyup because onkeypress is deprecated.

I will create a ticket to change the rule as soon as I receive the answer for the anchor use case.

Thank you for your feedback.



(Nick) #5

I agree, I did over-generalize. Thanks for the quick reply. Will watch for updates.