onClick
with some elements JS-074647 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"}
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]}
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 ))}
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 )
79 tabIndex={0}
80 className="p-2 shadow mt-[-8px] dropdown-content bg-base-100 rounded-xl w-50"
81 >
82 <li 83 className={`${ 84 follow ? "active:bg-red-500" : "active:bg-blue-500 " 85 } p-2 m-0 cursor-pointer rounded-xl active:text-white`} 86 onClick={followHandler} 87 > 88 <a>{follow ? "unfollow" : "follow"}</a>
89 </li>
90 </ul>
Enforce onClick
is accompanied by at least one of the following: onKeyUp
, onKeyDown
, onKeyPress
. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements
<div onClick={() => {}} />
<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
<button onClick={() => {}} />
<div onClick{() => {}} aria-hidden="true" />