Background
While working with Webpack and react js, I had configured eslint linter tool for identifying and reporting on patterns in JavaScript. At some point I need to use onClick event on div element which is not appropriate as it is non interactive element and only used to show content and containers in user interface.
There are few non interactive elements other than <div> like <main>, <area>, all heading tags like h1, h2 etc., <p>, <img>, <ul>, <li> and <ol> which does not support or say is not appropriate to use events on it.
Examples of interactive elements are button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, textbox.
Why this error occur🤔
Whenever we were trying to give mouse or keyboard event to non-interactive element this type of error occur during building our application which is coming from eslint library as it is enforcing us to use these events only on interactive elements as per standards.
For example:
//working with react js
<div onClick={handleClick}>
<h2>Somethings...</h2>
<p>Somethings....</p>
</div>
In above example we were using onClick event on <div> which comes under non-interactive element category and only used for showing content and container in user interface.
Hence we are getting error or warning like this:
How to fix it?
It is really simple to fix this type of error. Either you can use interactive element in place of non interactive element or else you can enforce an non-interactive element to behave like interactive. There is small hack to do that🤫
Apply a role attribute and tabindex to non-interactive element like this:
//working with react js
<div role="button"
tabindex={0}
onClick={handleClick}
>
<h2>Somethings...</h2>
<p>Somethings....</p>
</div>
Now our <div> element will behave like interactive element <button> and congratulations, we fixed this error😍
Bonus tip
As we have changed behavior of <div> element from non interactive to interactive, whenever we click on <div> element it will show a black outline around the <div>. To fix this problem you need to apply a css style like this:
.divClass:focus{
outline: none !important;
}
.divClass:focus-within{
outline: none !important;
}
Conclusion
It is advised to use mouse and keyboard events only on interactive elements but in some case we need to violet the rule and standard to get work done and we change the behavior of that element to behave like interactive element. Just simple hack we used to fix this issue like use role and tabindex to that element.
Thanks for reading. If some how I helped you to fix your issue or still facing same error, please post your issue or feedback to comment box.
If you found this article useful, please share it with your friends and colleagues!❤️
Read more articles on Dev.To ➡️ Shivam Pawar
Top comments (5)
You disabled the focus on that element. how is the user supposed to know which element is picked with tab-key? Please do not remove the focus outline.
Yes, I agree. I removed focus outline for my requirement.
Thanks for pointing out this.
after doing it I got:
LOL
Just because you can, doesn't mean you should. Assigning interactive roles to non-interactive elements may/will have impact on accessibility/WCAG.
Another error : Non-interactive elements should not be assigned interactive roles