Interaction added to non interactive element

1. What is a non interactive element?
2. How do you make an element non interactive?
3. How to fix non interactive elements should not be assigned mouse or keyboard event listeners?
4. What are interactive elements in HTML?

What is a non interactive element?

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 do you make an element non interactive?

It is currently possible to do this by setting aria-hidden="true" on the relevant section. This is why the inert attribute was added to HTML, it is an efficient way to disable all of the interactions above and hide elements from assistive technology.

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.