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={...}/>.
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:
We are sorry to hear that you are not satisfied with the content on this page.