Visible, non-interactive elements with click handlers must have at least one keyboard listener
35 const startIndex = (currentPage - 1) * contributorsPerPage;
36 const endIndex = startIndex + contributorsPerPage;
37 return contributors.slice(startIndex, endIndex).map(contributor => (
38 <div key={contributor.login} className="contributor-card" onClick={() => handleProfileClick(contributor.login)}>39 <img src={contributor.avatar_url} alt={contributor.login} />
40 <div className="contributor-info">
41 <h3>{contributor.login}</h3>
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" />