Prefer to accompany
onClick with some elements JS-0746
Anti-pattern
Minor
a year ago
—
a year old
Visible, non-interactive elements with click handlers must have at least one keyboard listener
12}: SideBarButtonPropT) {
13 return (
14 <div>
15 <p16 className={`${active ? "" : "text-opacity-75"} text-dark`}17 style={{ cursor: "pointer" }}18 onClick={trigger}19 >20 {name}
21 </p>
22 </div>Visible, non-interactive elements with click handlers must have at least one keyboard listener
50 aria-hidden="true"
51 style={{ ...dClass }}
52 >
53 <div54 className="modal-backdrop-custom bg-dark bg-opacity-50 vw-100 vh-100 position-fixed"55 onClick={onClose}56 role="button"57 />58 <div
59 className="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered modal-sm"
60 role="document"
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" />