Incorrect report of jsx-a11y/label-has-associated-control and jsx-a11y/label-has-for

Getting

  26:21  error  A form label must be associated with a control                                      jsx-a11y/label-has-associated-control
  26:21  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

Even though the element is nested inside the label and the htmlfor and id are set.

                    <label htmlFor="filters">
                      Filter by
                      <select id="filters" className="form-control">
                        <option value="0" selected>
                          All Snippets
                        </option>
                        <option value="1">Featured</option>
                        <option value="2">Most popular</option>
                        <option value="3">Top rated</option>
                        <option value="4">Most commented</option>
                      </select>
                    </label>

[teddywsi]

I stumbled on this issue today. I’m curious if it was fully resolved? Below are some examples of code where this error is popping up for me when I don’t think it should be. I am using the latest airbnb eslint config which uses version 6.2.1 of jsx-a11y.

Select:

  <form>
    <label htmlFor="dinosaur">
      Choose a dinosaur:{' '}
      <select id="dinosaur">
        <optgroup label="Theropods">
          <option>Tyrannosaurus</option>
          <option>Velociraptor</option>
          <option>Deinonychus</option>
        </optgroup>
        <optgroup label="Sauropods">
          <option>Diplodocus</option>
          <option>Saltasaurus</option>
          <option>Apatosaurus</option>
        </optgroup>
      </select>
    </label>
  </form>

Meter:

  <form>
    <label htmlFor="fuel">
      Fuel level:{' '}
      <meter
        id="fuel"
        min={0}
        max={100}
        low={33}
        high={66}
        optimum={80}
        value={60}
      >
        at 60/100
      </meter>
    </label>
  </form>

Progress:

  <form>
    <label htmlFor="progress">
      File progress:{' '}
      <progress id="progress" max="100" value="70">
        70%
      </progress>
    </label>
  </form>

[jessebeach]

@Stopa thank you for the report. There are two things happening here.

One, there is indeed a bug. The rule doesn’t include the <select> element as one of the default control elements. You can configure the rule to include select as a controlElement for now until a future release with a fix. Here’s the fix: #503

Two, you’re example code doesn’t include a text for a label. You can use text content, or aria-label or aria-labelledby or define a prop that contains the label text and configure the rule to recognize that prop. But text you must have.

<label htmlFor="selectInput">
  Favorite ice creams
  <select id="selectInput" />
</label>