CODEWITHSUNDEEP
typescripteslint
DSteman
DSteman

Reputation: 1658

How to disable "non-interactive elements with click handlers must have at least one keyboard listener" rule in eslint?

Whenever I write an onClick event attribute without an onKeyUp for example, the error is raised by eslint

Visible, non-interactive elements with click handlers must have at least one keyboard listener

I can't figure out how to disable this rule. How do I do this?

Upvotes: 7

Views: 19095

Answers (4)

Vikas Gupta
Vikas Gupta

Reputation: 1233

You can also disable it as

Solution 1:

<someElement onClick={this.handleClick} onKeyDown={this.handleClick}  aria-hidden="true" >

Pros:

  • You don't have to disable to it for project as in disabling rule in config etc

Cons:

  • visually impaired people will not be detect this someElement, as using aria-hidden="true" would remove it from accessibility tree. hence won't be able interact.

That's why, I mostly go with other solution in such case.

Solution 2:

// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<someElement onClick={this.handleClick}>

Upvotes: 3

Alex von Brandenfels
Alex von Brandenfels

Reputation: 1856

Do not disable this eslint rule. It exists to help you make sure that your site is accessible to people who are using screen readers.

You can easily write code that complies with this rule by doing something like the following:

<someElement onClick={this.handleClick} onKeyDown={this.handleClick}>

Alternatively, you can use a prebuilt component from a library, like https://mui.com/material-ui/react-button/ , which will comply with accessibility standards by default and save you some work.

Upvotes: 5

Joseph
Joseph

Reputation: 462

Under rules in .eslintrc.js

vuejs-accessibility/click-events-have-key-events': 'off',

Upvotes: 0

Gabriel Bleu
Gabriel Bleu

Reputation: 10204

'jsx-a11y/click-events-have-key-events': 'off' in your eslint config should disable it.

Upvotes: 6

Related Questions