控件必须与文本标签关联

我收到错误：

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

这段代码是：

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

该错误与这个 eslint 规则 https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md.

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

问题是什么？

EDIT

正如@rickdenhaan 所指出的，正确的应用规则是this one https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md.

该消息实际上来自控件具有关联标签 https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md rule.

该规则由以下条件触发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}
 />