[no-static-element-interactions] Suppress warning if specific role is specified?

[tleunen]

Should the rule be auto-suppressed when there's a role attribute on the element?

<div role="button" onClick={sth}>Click me</div>

[ljharb]

If it's a button, why isn't it a button?

[tleunen]

Because of a CSS framework that style all buttons but for this specific case you don't want it to be styled as a "true" button? ^^

Note I agree if it has a click function, it should be a link or a button, but sometimes it's not possible and I thought the role was meant for that.

[lencioni]

Role is important for that, but if you want this element to be accessible and usable, you also need to give it a tabIndex so it can be focused, and provide a keyboard handler to allow space or enter to activate it.

[tleunen]

Is <a onClick={sth}> valid or does it require something more?

[lencioni]

That needs an href that points to the relevant content (e.g. not "#").

[tleunen]

So the only valid element that can have onClick is the <button>?

[lencioni]

Also interactive form elements like input, and links.

[lencioni]

Oh, also <area>

[cloudlena]

I'm experiencing a similar problem like @tleunen. I currently have a couple of <div>s with the role="button" and onClick={sth}. These are mainly chevrons to open collapsible areas which I don't want to be styled like a button at all and which don't point to a specific URL. So I can't apply either <button> (messes up all styles and has different style presets depending on the browser, which I would have to explicitly overwrite for each of these interactive elements) nor <a> (since my elements don't point to a new URL but only open a collapsible area).

Do you guys have any suggestions for these cases? According to http://uxmovement.com/buttons/when-to-use-a-button-or-link/ they should be links from a UX perspective but I don't see how I would add a href pointing to something in my case.

To see an example of my chevrons, please browse to https://developer.swisscom.com/pricing and scroll down to the "Services" section.

[sir-marc]

More like a best practice question:
If I have a Modal component with a Modalcontainer Component.
Both are divs, how do I handle an onClick event on the ModalContainer Component? I want then to close the Modal so I need an onClick handler on the div element? Do i get something terribly wrong or is this case acceptable?

[shulcsm]

What about drawable canvas?

[seansean11]

What are most people doing to remedy this? Does this mean that we should zero out all of the CSS styles on something like the button element across browsers so that we can use it for click events. There are so many instances in modern dev where you need to use click events on "non-interactive" elements and replacing with the button element (or any of the other "interactive elements") carries undesired styles with it by default. I understand the need for accessibility, but can't help but feel that these "interactive" elements (and their default styles) were not originally intended to be used in the way that we are using them.

[beefancohen]

There are ways to make non-interactive elements accessible (as mentioned above by @lencioni). this rule is a fairly strict rule if you want to ensure a11y across all devices without having to add these special properties to the non-interactive element. you can turn off this rule if you absolutely need to for styling purposes, but usually there is a way to style an accessible, semantic element the way you want without having to make it a <div>