DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for ERROR: non-interactive elements should not be assigned mouse or keyboard event jsx-a11y/no-noninteractive-elements-interactions
Shivam Pawar
Shivam Pawar

Posted on

ERROR: non-interactive elements should not be assigned mouse or keyboard event jsx-a11y/no-noninteractive-elements-interactions

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>
Enter fullscreen mode Exit fullscreen mode

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:

errormsg

warning

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Follow me on ‡️
🌐 LinkedIn
🌐 Github

Top comments (4)

Collapse
 
sirriah profile image
Tereza FatkovΓ‘

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.

Collapse
 
shivampawar profile image
Shivam Pawar Author

Yes, I agree. I removed focus outline for my requirement.
Thanks for pointing out this.

Collapse
 
jorgegarba profile image
Jorge Garnica Blanco

after doing it I got:

Non-interactive elements should not be assigned interactive roles

LOL

Collapse
 
519swap profile image
519swap

Another error : Non-interactive elements should not be assigned interactive roles

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.