Visible, non-interactive elements with click handlers must have at least one keyboard listener
208 </div>
209 <div className="colleges">
210 {filteredColleges.map((college, index) => (
211 <div212 className={`college ${activeIndex === index ? 'active' : ''}`}213 key={college.id}214 onClick={() => handleCollegeClick(college)}215 onTouchStart={() => handleTouchStart(index)}216 onTouchEnd={handleTouchEnd}217 >218 <div className="college-content">
219 <div className="up">
220 <img className="college-image" src={college.imageURL} alt="College Logo" />Visible, non-interactive elements with click handlers must have at least one keyboard listener
174 </li>
175 </ul>
176 </div>
177 <div className="hamburger" onClick={toggleMenu}>178 <div className={`bar ${menuOpen ? 'open' : ''}`} />
179 <div className={`bar ${menuOpen ? 'open' : ''}`} />
180 <div className={`bar ${menuOpen ? 'open' : ''}`} />
Description
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
Bad Practice
<div onClick={() => {}} />
Recommended
<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
<button onClick={() => {}} />
<div onClick{() => {}} aria-hidden="true" />