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", 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

Related