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

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?

5 Answers

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)

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 :

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.

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

<a 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.

just add aria-hidden to it

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