28

我收到错误消息:

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

这段代码是:

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

该错误与此 eslint 规则有关。

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

问题是什么?

编辑

正如@rickdenhaan 所指出的,适用的正确规则是这个

4

1 回答 1

42

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

规则由role="button"属性触发。这会将您<i />变成一个控件,因此出于可访问性原因它需要一个文本标签(例如,屏幕阅读器知道要读出什么)。为了遵守规则,您可以给“按钮”文本内容或添加一个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}
 />
于 2019-10-13T20:14:14.967 回答