4export default function Home({ title, features }) {
5 return (
6 <>
7 <h1 8 class="no-unknown-property" 9 font-size="24"10 onClick={() => console.log("Should not use bind in JSX props")}11 >12 {title || "Welcome to DeepSource"}
13 </h1>
14 <Hero
4export default function Home({ title, features }) {
5 return (
6 <>
7 <h1 8 class="no-unknown-property" 9 font-size="24"10 onClick={() => console.log("Should not use bind in JSX props")}11 >12 {title || "Welcome to DeepSource"}
13 </h1>
14 <Hero
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
.
<li onClick={() => void 0} />
<div onClick={() => void 0} role="listitem" />
<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