⏎ Lint Rules

useKeyWithClickEvents (since v10.0.0)

This rule is recommended by Rome.

Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Examples

Invalid

<div onClick={() => {}} />

a11y/useKeyWithClickEvents.js:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
  
  > 1 │ <div onClick={() => {}} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
  

<div onClick={() => {}} ></div>

a11y/useKeyWithClickEvents.js:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
  
  > 1 │ <div onClick={() => {}} ></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
  

Valid

<div onClick={() => {}} onKeyDown={handleKeyDown} />

<div onClick={() => {}} onKeyUp={handleKeyUp} />

<div onClick={() => {}} onKeyPress={handleKeyPress} />

// this rule doesn't apply to user created component
<MyComponent onClick={() => {}} />

<div onClick={() => {}} {...spread}></div>

<div {...spread} onClick={() => {}} ></div>

<button onClick={() => console.log("test")}>Submit</button>