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

Question

我收到错误：

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

这段代码是：

 <i

   role="button"

   className={classN}

   onClick={this.muteVolume}

   onKeyDown={this.muteVolume}

 />

该错误与此 eslint 规则有关。

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

问题是什么？

编辑

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

Answer 1

该消息实际上来自control-has-related-label规则。规则由role="button"属性触发。这会将您<i />变成一个控件，因此出于可访问性原因，它需要一个文本标签（例如，屏幕阅读器知道要读出什么）。为了遵守规则，您可以给“按钮”文本内容或添加一个aria-label属性：<i&nbsp; &nbsp;role="button"&nbsp; &nbsp;className={classN}&nbsp; &nbsp;onClick={this.muteVolume}&nbsp; &nbsp;onKeyDown={this.muteVolume}>&nbsp; Mute volume</i><i&nbsp; &nbsp;role="button"&nbsp; &nbsp;aria-label="Mute volume"&nbsp; &nbsp;className={classN}&nbsp; &nbsp;onClick={this.muteVolume}&nbsp; &nbsp;onKeyDown={this.muteVolume}&nbsp;/>