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: