如何修复 'Static HTML elements with event handlers require a role.'？

Question

我的 React js 样式组件包含以下代码：

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

这工作正常，但 eslint 抱怨：

Static HTML elements with event handlers require a role.

如何解决这个错误？

Answer 1

你需要在你的标签中添加一个角色道具来避免这个警告，例如一个按钮

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

我猜是因为你的锚标签中缺少 HREF 道具（不确定）

Answer 2

您需要明确设置角色。所以，试试下一个代码：

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

此外，如您所见，我通过替换常规声明中的箭头函数修改了 onClick 处理程序。它将减少烦人且昂贵的计算。

Answer 3

在我的例子中，我使用了 aria-hidden="true"，然后我能够提交。

之前：

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

我用 aria-hidden 更新后：

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

我的问题已解决。

Answer 4

前面的答案确实给出了具体的例子，我缺少的是 list of roles.
如果有人正在寻找其他角色，则会列出部分列表 here。
缺少 role 的一个例子是 tab，我需要它。

Answer 5

只需添加 aria-hidden 即可

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

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