Non-interactive elements assigned mouse/keyboard event listeners JS-0760
Performance
Minor
7 months ago
—
2 years old
Non-interactive elements should not be assigned mouse or keyboard event listeners
79 tabIndex={0}
80 className="p-2 shadow mt-[-8px] dropdown-content bg-base-100 rounded-xl w-50"
81 >
82 <li 83 className={`${ 84 follow ? "active:bg-red-500" : "active:bg-blue-500 " 85 } p-2 m-0 cursor-pointer rounded-xl active:text-white`} 86 onClick={followHandler} 87 > 88 <a>{follow ? "unfollow" : "follow"}</a>
89 </li>
90 </ul>Non-interactive elements should not be assigned mouse or keyboard event listeners
78 <a>logout</a>
79 </li>
80 <hr />
81 <li82 onClick={() => dispatch(setShowStep1(true))}83 className="p-2 active:bg-green-500 rounded-xl active:text-white"84 >85 <a>Create a Product</a>
86 </li>
87 </ul>Non-interactive elements should not be assigned mouse or keyboard event listeners
71 <a>Profile</a>
72 </li>
73 <hr />
74 <li75 className={`active:bg-red-500 p-2 m-0 cursor-pointer rounded-xl active:text-white`}76 onClick={logoutHandler}77 >78 <a>logout</a>
79 </li>
80 <hr />Non-interactive elements should not be assigned mouse or keyboard event listeners
64 tabIndex={0}
65 className="p-2 shadow z-40 fixed right-1 md:right-auto md:relative dropdown-content bg-base-100 rounded-xl min-w-max text-left"
66 >
67 <li68 className={`active:bg-blue-500 p-2 m-0 cursor-pointer rounded-xl active:text-white`}69 onClick={() => router.push('/profile')}70 >71 <a>Profile</a>
72 </li>
73 <hr />Non-interactive elements should not be assigned mouse or keyboard event listeners
21 <div className="w-[100vw] h-[80px] fixed top-0 bg-[#f5f5f5] ">
22 <div className="grid grid-cols-3 justify-center align-middle text-center h-[80px] lg:gap-20 sm:gap-2">
23 <div className="flex justify-left ml-10 items-center">
24 <h125 className="text-xl font-bold cursor-pointer"26 onClick={() => router.push('/')}27 >28 Produx
29 </h1>
30 </div>
Description
Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <p>, <img>, <li>, <ul> and <ol>. Non-interactive WAI-ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.
Bad Practice
<li onClick={() => void 0} />
<div onClick={() => void 0} role="listitem" />
Recommended
<div onClick={() => void 0} role="button" />
<div onClick={() => void 0} role="presentation" />
<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
<button onClick={() => void 0} className="foo" /> // button is interactive.
<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from screenreader.
<Input onClick={() => void 0} type="hidden" /> // This is a higher-level DOM component