Non-interactive elements assigned mouse/keyboard event listeners JS-0760
Performance
Minor
22 days ago
—
22 days old
Non-interactive elements should not be assigned mouse or keyboard event listeners
72 <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
73 <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>
75 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>76 </ul>
77 </div>
78 </fieldset>Non-interactive elements should not be assigned mouse or keyboard event listeners
71 <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>
72 <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
73 <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>75 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>
76 </ul>
77 </div>Non-interactive elements should not be assigned mouse or keyboard event listeners
69 <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">
70 <label className="text-xl lg:text-2xl my-auto p-1">Category</label>
71 <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>
72 <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>73 <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>
75 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>
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