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?

Acting

Can you try adding the role=button to the anchor tag – Excavation

Answer 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)

Wimer

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

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

Answer 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

Etymologize

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

---

Edit: per the comment request, my personal error was solved by adding role, but I was missing a list of allowed roles, see above for a partial list and a more complete (or possibly complete) list here, thanks to the comment by Caiof.

Ampulla

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. – Erny

A more complete list of roles: w3.org/TR/wai-aria-1.1/#role_definitions – Pricilla

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

Byram

Answer 5

just add aria-hidden to it

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

Politick

Answer 6

Just need to add the 'aria-hidden' attribute, like this:

<div onClick={handleClickCollectionCard} aria-hidden="true">

Gifford

Answer 7

You can simply add 'aria-hidden' attribute to the element. For example, I was working with <span> tag so I did the following:

<span aria-hidden="true" onClick={() => showDialog()}>Click here</span>

And, it worked fine!

Sarnen