Non-interactive elements assigned mouse/keyboard event listeners JS-0760
Performance
Minor
a month ago
—
2 months old
Non-interactive elements should not be assigned mouse or keyboard event listeners
43 <span>Copy Hash</span>
44 </button>
45 </li>
46 <li onClick={handleClick}>47 <button type="button" onClick={openInExplorer} className="flex gap-2">
48 <ExternalLinkIcon />
49 <span>Open in Minascan</span>Non-interactive elements should not be assigned mouse or keyboard event listeners
37 {hash}
38 </div>
39 <ul className="p-2 shadow menu dropdown-content border-2 border-secondary z-[1] bg-neutral rounded-box w-52">
40 <li onClick={handleClick}>41 <button type="button" onClick={copyHash} className="flex gap-2">
42 <CopyIcon />
43 <span>Copy Hash</span>Non-interactive elements should not be assigned mouse or keyboard event listeners
64 <span>Open in Minascan</span>
65 </button>
66 </li>
67 <li onClick={handleClick}>68 <Link
69 to="/contacts/new"
70 state={{ address: publicKey }}Non-interactive elements should not be assigned mouse or keyboard event listeners
58 <span>Copy Address</span>
59 </button>
60 </li>
61 <li onClick={handleClick}>62 <button type="button" onClick={openInExplorer} className="flex gap-2">
63 <ExternalLinkIcon />
64 <span>Open in Minascan</span>Non-interactive elements should not be assigned mouse or keyboard event listeners
52 })}
53 </div>
54 <ul className="p-2 shadow menu dropdown-content border-2 border-secondary z-[1] bg-neutral rounded-box w-52">
55 <li onClick={handleClick}>56 <button type="button" onClick={copyAddress} className="flex gap-2">
57 <CopyIcon />
58 <span>Copy Address</span>
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