How to fix 'Static HTML elements with event handlers require a role.'?

Question

My reactjs styledcomponent contains this code:

<a styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

This works fine but the eslint is complaining:

Static HTML elements with event handlers require a role.

How can I fix this error?

Solution 1

you need to add a role props in your a tag to avoid this warning, for example a button

<a role = "button" styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

I guess it is because the HREF props is missing in your anchor tag (not sure)

Solution 2

In my case, I used aria-hidden="true", then I was able to commit.

Before:

<i className="pwdicon" onClick={togglePasswordVisiblity} >

After I updated with aria-hidden:

<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >

My problem was resolved.

Reference Link : https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

Solution 3

The earlier answers do give specific examples, what I was missing is a list of roles.
If someone is looking for other roles, a partial list is listed here.
An example of a missing role is tab which I needed.

Solution 4

You need to set the role explicitly. So, try the next code:

<a role="button" styling="link" onClick={this.gotoLink}>
  <SomeComponent /> 
</a>

Also, as you can see I've modified the onClick handler by replacing arrow function on regular declaration. It would reduce annoying and expensive calculations.

View more solutions

Comments

[Michael Freidgeim]

You may also need to add tabIndex='0' to avoid "'button' interactive role must be focusable"

[SherylHohman]

Please edit to include exact code to solve the OP's problem, in addition to the useful info you have added. As is, this is not a stand alone answer, but a Comment to another post. Indeed, some answers provided do not even use the role property, so without context, it may not even universally apply. For reference, the help section, linked at the top of every page, does indicate that exact coded necessary to solve the OP's issue must be embedded in Answers, whenever possible. Alternatively, post as a Comment to one or more posts. Links like this can be valuable as Comments.

[Raphael]

for me somehow tabIndex='0' was not working and tabIndex={0} was working