How to fix click-events-have-key-events?
Last updated:
How to fix click-events-have-key-events linting error?
The easiest way to make a clickable element usable for keyboard users is to use native HTML elements instead of using <div onClick={...}/> . Native HTML elements which are accessible by default are button and a .
If it's not possible to use native clickable HTML elements, you should use one of the following techniques to add a keyboard listener:
<div onClick={handler} onKeyDown={handler} tabIndex="0" role="button">
# Or
<div onClick={handler} onKeyUp={handler} tabIndex="0" role="button">
# Or
<div onClick={handler} onKeyPress={handler} tabIndex="0" role="button">Note the tabIndex="0" and role="button" which are important for accessibility!
There are 6 keyboard WCAG Criteria
Does your website comply with all of them?
Conclusion
Fix the click-events-have-key-events linting error in your React, Angular, Vue or Svelte application by using an HTML element that is clickable as per the HTML specification. If that is not possible, add keyboard event listener, a role="button" attribute and a tabIndex attribute.
For more info see: