Hijacking of `id` attribute by a `div` generated by `react-select` prevents meeting requirements of WCAG for accessible `label` and `input` tags

[yvesgurcan]

I've noticed that the way react-select imposes an id of react-select-2-input on the input tag prevents the use of the preferred method for WCAG to handle labels and input fields for accessibility purposes (https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-explicitly).

The React code below:

import React from 'react';
import Select from 'react-select';

export class MyForm extends React.Component {
    return (
          <label htmlFor="expected-id-for-input">
            My label
          </label>
          <Select id="expected-id-for-input" />
    );
}

Results in HTML similar to this:

<label for="expected-id-for-input">
    My label
</label>
<div id="expected-id-for-input">
    <div class=" css-10uwl3j-control">
        <div class=" css-g1d714-ValueContainer">
            <div class="css-15wyxdu-Input">
                <div class="" style="display: inline-block;">
                    <input id="react-select-2-input" value="">
                </div>
            </div>
        </div>
    </div>
</div>

For compliance with WCAG, the id should be on the input, not the div, but this is not possible with react-select.

[Rall3n]

@yvesgurcan

The id prop is used to assign an id attribute to thecontainer element.

If you want to to set the id attribute of the rendered <input> element, consider using the inputId prop.

[yvesgurcan]

Thank you for your answer. That's good to know!

It seems fair to assume that a prop called id would be attributed to the input tag rather than it's container. Can the name of the id prop be changed to containerId in the next major version to make the purpose of this prop more intuitive?