Prefer that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute JS-0765
Anti-pattern
Minor
7 months ago
—
2 years old
Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
47 onChange={handleImg}
48 multiple={false}
49 />
50 <div51 onClick={() => fileRef.current.click()}52 className={`cursor-pointer text-center justify-center text-white items-center flex w-[300px] h-[270px] ${53 !userInfo.pfp && "bg-gray-300"54 } w-full rounded-box`}55 >56 {userInfo.pfp ? (
57 <img
58 className={"h-full object-contain w-full"}Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
21 ? products.map((product, idx) => {
22 return (
23 <div key={idx}>
24 <div25 onClick={() =>26 router.push(`products/${product.name}`)27 }28 className="bg-blue-400 m-2 rounded-box p-5 text-white flex items-center hover:cursor-pointer"29 >30 {product.images ? (
31 <img
32 src={product.images[0]}Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
58 <div className='block min-w-max m-5 bg-[#F5F5F5] text-center'>
59 <div>
60 {Object.keys(channels).map((c, idx) => (
61 <span 62 key={idx} 63 className={`px-5 text-sm overflow-auto mr-[2vw] py-3 hover:bg-gray-200 hover:cursor-pointer rounded-lg ${ 64 channel == c && 'bg-gray-300' 65 }`} 66 onClick={() => setChannel(c)} 67 > 68 {channels[c].icon + ' ' + c}
69 </span>
70 ))}Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
34 }, [isDragging])
35
36 return (
37 <div38 ref={drag}39 onClick={() => {40 router.push({41 pathname: pathToPost,42 query: {43 name: post.product.name || (name as string),44 channel: post.type[0],45 postId: post.ID,46 },47 })48 }}49 className={`flex w-12/12 cursor-pointer bg-white rounded-md p-3 my-3 mx-3 `}50 >51 <h1 className={'text-left ml-2'}>{post.title}</h1>
52 </div>
53 )Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
51 <div className="mx-auto mt-20">
52 {Object.keys(channels).map((c) => {
53 return (
54 <div55 key={c}56 className=" text-3xl p-4 hover:bg-gray-200 cursor-pointer mx-12 rounded-xl mb-20"57 onClick={() => setShowMenu(false)}58 >59 <Link
60 href={{
61 pathname: `/products/[name]/${
Description
Static HTML elements do not have semantic meaning. This is clear in the case of <div> and <span>. It is less so clear in the case of elements that seem semantic, but that do not have a semantic mapping in the accessibility layer. For example <a>, <big>, <blockquote>, <footer>, <picture>, <strike> and <time> -- to name a few -- have no semantic layer mapping. They are as void of meaning as <div>.
The WAI-ARIA role attribute confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
Bad Practice
<div onClick={() => {}} />
Recommended
<button onClick={() => {}} className="foo" />
<div className="foo" onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />