Rule proposal: require clickable non-button/non-link elements listen for space or enter

[lencioni]

If you are making a non-button or non-link element clickable, you also need to wire up keyboard listeners for space and enter. While I don't think we will be able to ensure that this is all implemented correctly, we can likely at least add a warning for any DOM element that is not a or button that has onClick and not a keyboard event listener.

cc @backwardok

[backwardok]

Btw I think also inputs work as well - essentially form elements and links should have that behavior default. It's the elements that you're adding non default behavior to where you have to also add in keyboard listeners

[lencioni]

Oh right, of course.

[ljharb]

For purposes of semantic markup, why would we want to encourage adding onClick to a non-natively-clickable thing anyways?

[lencioni]

Yeah, it should likely suggest using a button or link first, or alternatively adding the keyboard stuff.

[ljharb]

Do we have another rule that can actively prohibit adding interaction behavior to non-natively-interactable DOM elements?

[beefancohen]

Do we have another rule that can actively prohibit adding interaction behavior to non-natively-interactable DOM elements?

No but we have onclick-has-role, which requires adding the role prop to non-natively-interactable DOM elements with click handlers.

---

just to clarify, this seems like we are taking the logic for determining non-interactive DOM elements from onclick-has-role and enforcing that those elements with onClick handlers have accompanying onKeyDown, onKeyUp, or onKeyPress props.

rule: click-events-have-key-events (similar to mouse-events-have-key-events)

[ljharb]

I filed #78 for https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/77#issuecomment-241918479