title: react/jsx-a11y eslint throws unexpected errors for control/label
body: <p>This code:</p>
  
  <pre><code>      &lt;PopupContent&gt;
          &lt;label htmlFor="popup" style={{ margintop : '0px', marginbottom : '0px' }}&gt;log out&lt;/label&gt;
          &lt;button type="button" id="popup" onClick={this.logUserOut} /&gt;
        &lt;/PopupContent&gt;
  
  </code></pre>
  
  <p>throws these two errors:</p>
  
  <pre><code> 84:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
   85:9  error  A control must be associated with a text label  jsx-a11y/control-has-associated-label
  </code></pre>
  
  <p>What am I missing?</p>