Non interactive elements should not be assigned interactive roles

1. What are non interactive elements?
2. How to fix non interactive elements should not be assigned mouse or keyboard event listeners?
3. What are interactive elements in HTML?

What are non interactive elements?

Non-interactive elements include <main> , <area> , <h1> (, <h2> , etc), <img> , <li> , <ul> and <ol> . Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href> , <button> , <input> , <select> , <textarea> .

How to fix non interactive elements should not be assigned mouse or keyboard event listeners?

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.

What are interactive elements in HTML?

However, the last essential components are interactive elements. Any time you put a username and password into a login field, or press a button to open a menu, or click a checkbox on a settings page, you're dealing with interactive elements such as buttons and inputs.