控件必须与文本标签相关联

Question

我收到错误：

A control must be associated with a text label.

这段代码是：

 <i
   role="button"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />

该错误与 this eslint rule 有关。

当使用标签和关联的控件时，该规则很有意义。就我而言，我根本不需要标签。我可以创建一个，但在我看来这像是一种避免出现该错误的解决方法。

有什么问题？

编辑

正如@rickdenhaan 所指出的，要应用的正确规则是 this one。

Answer 1

该消息实际上来自 control-has-associated-label 规则。

规则由 role="button" 属性触发。这会将您的 <i /> 变成一个控件，因此出于可访问性原因，它需要一个文本标签（例如，屏幕阅读器知道要读出什么）。为了遵守规则，您可以提供 "button" 文本内容或添加 aria-label 属性：

<i
   role="button"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
>
  Mute volume
</i>

<i
   role="button"
   aria-label="Mute volume"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />

控件必须与文本标签相关联

A control must be associated with a text label

javascript

reactjs

eslint

airbnb-js-styleguide