title: A control must be associated with a text label
body: <p>I am getting the error:</p>
  
  <blockquote>
    <p>A control must be associated with a text label.</p>
  </blockquote>
  
  <p>The piece of code is:</p>
  
  <pre><code> &lt;i
     role="button"
     className={classN}
     onClick={this.muteVolume}
     onKeyDown={this.muteVolume}
   /&gt;
  </code></pre>
  
  <p>That error is related to <a href="https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md" rel="noreferrer">this eslint rule</a>.</p>
  
  <p>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. </p>
  
  <p>What is the problem?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>As pointed out by @rickdenhaan, the correct rule to apply is <a href="https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md" rel="noreferrer">this one</a>.</p>