How to Fix 'Static Html Elements with Event Handlers Require a Role.'?
My Reactjs Styledcomponent Contains This Code: This. gotoLink()}> This Works Fine but the Eslint Is Complaining: Static Html Elements with Event Handlers...
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 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.
just add aria-hidden to it
<a aria-hidden styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
