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?

Can you try adding the `role=button` to the anchor tag – cross19xx Jan 20 '19 at 07:46 — cross19xx, Jan 20 '19 at 07:46

score 53 · Accepted Answer · answered Jan 20 '19 at 07:46

53

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)

answered Jan 20 '19 at 07:46

Jerome

2,429
2
22
37

8

You may also need to add tabIndex='0' to avoid "'button' interactive role must be focusable" – Michael Freidgeim Oct 15 '19 at 01:54
for me somehow tabIndex='0' was not working and tabIndex={0} was working – Raphael Feb 10 '22 at 14:30

score 24 · Answer 2 · edited Jan 23 '22 at 04:40

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

MikeL · Answer 3 · 2023-01-11T04:17:10.737

8

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.

edited Jan 11 '23 at 04:17

answered Jan 28 '21 at 14:09

MikeL

2,756
2
23
41

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. – SherylHohman Jan 23 '22 at 04:49
A more complete list of roles: https://www.w3.org/TR/wai-aria-1.1/#role_definitions – Caiof Jan 10 '23 at 17:12

score 3 · Answer 4 · answered Jan 20 '19 at 08:07

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.

score 3 · Answer 5 · answered Jan 16 '22 at 13:28

3

just add aria-hidden to it

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

answered Jan 16 '22 at 13:28

navid sotoudeh mehr

39
4

score 1 · Answer 6 · edited Jul 27 '22 at 16:35

1

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

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

edited Jul 27 '22 at 16:35

Heretic Monkey

11,687
7
53
122

answered Jul 22 '22 at 15:27

Jeffrey Ma

11
2

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

6 Answers6

Linked