Non-interactive elements assigned mouse/keyboard event listeners JS-0760
Performance
Minor
8 months ago
—
8 months old
Non-interactive elements should not be assigned mouse or keyboard event listeners
4export default function Home({ title, features }) {
5 return (
6 <>
7 <h1 class="no-unknown-property" font-size="24" onClick={() => console.log('Should not use bind in JSX props')}> 8 {title ? title : `Welcome to DeepSource`}
9 </h1>
10 <Hero className={'bg'} title='DeepSource is how you write clean and secure code' title=''></Hero>Non-interactive elements should not be assigned mouse or keyboard event listeners
4export default function Home({ title, features }) {
5 return (
6 <>
7 <h1 class="no-unknown-property" font-size="24" onClick={() => console.log('Should not use bind in JSX props')}> 8 {title ? title : `Welcome to DeepSource`}
9 </h1>
10 <Hero className={'bg'} title='DeepSource is how you write clean and secure code' title=''></Hero>
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