Visible, non-interactive elements with click handlers must have at least one keyboard listener
39 return (
40 <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
41 {currentContributors.map((contributor, index) => (
42 <div43 key={contributor.login}44 className="bg-white m-2 p-8 rounded-lg shadow-md text-center cursor-pointer transform transition-transform duration-200 hover:scale-105"45 onClick={() => handleProfileClick(contributor.login)}46 >47 <img
48 src={contributor.avatar_url}
49 alt={contributor.login}
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" />