Rule to disallow non-native DOM element interactions

[ljharb]

For example, onClick should only be valid on <a>, <button>, <input>, <textarea>, <select>… i'm sure I'm forgetting some, but there should not be an onClick on a <div>, for example.

The same should apply to keyboard events.

[ljharb]

This is a followup from https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/77#issuecomment-241918479

[beefancohen]

Is this something we would want to error on or just warn with suggestion to use a natively-interactable DOM element? I know you've felt in the past that warning isn't entirely useful, but there are ways to make elements like <div> clickable as long as a proper role and a positive tabIndex are applied to the element.

[ljharb]

How someone wishes to configure it would be up to them - and a helpful message is great - but I certainly wouldn't want anything to be configured as less than an error.

There are totally a myriad of workarounds to make elements like <div> clickable, but then you lose the semantic value of the tag name. Also, applying any tabIndex that is > 0 has a11y problems.

[beefancohen]

To be clear, I was talking about our recommended config 😛

[ljharb]

aha, in that case it's up to you. It's certainly an opinionated rule, so a warning might make sense there.

[sir-marc]

How do you handle onClick events on divs then?
For example a Modal. If i click on the Modal outside the popup itself, i want it to close. The Modalcontainer is a div for sure (or am i getting something wrong?). So how would i apply this use case then?