A control must be associated with a text label

Question

I am getting the error:

A control must be associated with a text label.

The piece of code is:

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

That error is related to this eslint rule.

That rule makes sense when using a label and a control associated. In my case, I do not need a label at all. I could create one but that looks to me like a workaround to avoid getting that error.

What is the problem?

Answer 1

That message actually comes from the control-has-associated-label rule.

The rule is triggered by the role="button" attribute. That turns your <i /> into a control, so it needs a text label for accessibility reasons (so screen readers know what to read out, for example). To comply with the rule, you can either give the "button" textual content or add an aria-label attribute:

<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}
 />