How to fix 'Static HTML elements with event handlers require a role.'?
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" so I'm able to commit.
<i className="pwdicon" onClick={togglePasswordVisiblity} >After I updated like below,<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >My problem is resolvedReference Link : https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
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.