click-event-has-key-events doesn't always pick up click directive

[pieterbeulque]

A co-worker noticed some inconsistency on when this rule throws an error. In our particular use case, these two versions throw the linting error as expected:

<button @click.prevent="isExpanded = !isExpanded">

<button @click.prevent="toggleIsExpanded()">

However, this one doesn't throw the linting error.

<button @click.prevent="toggleIsExpanded">

This is in Vue 3, for what it's worth.

[kddnewton]

So none of these should throw that linting error. That error should only be thrown for non-interactive elements (elements that do not descend from widget). Since you're using a button, that should never raise an error. If it was a div, then all 3 should raise an error.

So it seems like only the last one is working as expected?

[pieterbeulque]

My bad, I don't know why I created the examples with <button> instead of <div>. The issue was happening on a <div> in our code. Tested all three scenarios again with <div> to confirm:

• ✅ <div @click="isExpanded = !isExpanded"> raises the error
• ✋ <div @click="toggleIsExpanded"> doesn't raise the error
• ✅ <div @click="toggleIsExpanded()"> raises the error

[pieterbeulque]

This is awesome, thank you @kddeisz!