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?

EDIT

As pointed out by @rickdenhaan, the correct rule to apply is this one.

I tried to reproduce the error in codesandbox, without success. are you using create-react-app? — Stamatis Deliyannis, Oct 13 '19 at 19:42
Hi Stamatis, I did use create-react-app. Thank you for your time. — fjplaurr, Oct 14 '19 at 12:12

score 56 · Accepted Answer · answered Oct 13 '19 at 20:14

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

Hi rickdenhaan, You are right. The error "A control must be associated with a text label" may be a bit confusing between those two rules. Thank you for your time. My solution was to add "aria-label" attribute by the way. — fjplaurr, Oct 14 '19 at 12:11

score 0 · Answer 2 · answered Jan 05 '23 at 12:07

I was facing the same error. My use case was this:

I disabled this error and the web-app was still functioning well. I basically disabled eslint for the line where error was being throwed by inserting this before the line:

{/* eslint-disable-next-line */}

So the error-free code then looks like:

It is a .jsx file by the way. Hope it helps :)

A control must be associated with a text label

2 Answers2

Linked