如何修复“带有事件处理程序的静态HTML元素需要角色”？

Question

我的reactjs styledcomponent包含以下代码：

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

这很好用，但随行随地抱怨：

Static HTML elements with event handlers require a role.

如何解决此错误？

Answer 1

就我而言，我使用了 aria-hidden="true" 所以我可以提交。

<i className="pwdicon" onClick={togglePasswordVisiblity} >

After I updated like below,

<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >

My problem is resolved

参考链接：https : //github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

Answer 2

您需要在标签中添加角色道具以避免此警告，例如按钮

<a role = "button" styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

我猜这是因为锚标记中缺少HREF道具（不确定）

Answer 3

早期的答案确实给出了具体的例子，我缺少的是roles.
如果有人正在寻找其他职位，此处列出了部分列表。我需要一个 缺失的例子。
roletab

编辑：根据评论请求，我的个人错误通过添加解决了role，但我缺少允许的角色列表，请参阅上面的部分列表和更完整（或可能完整）的列表，此处，感谢Caiof的评论。