Aria-owns is empty when the searchable option is true

[jrubstein]

When the select is used as autocomplete, the aria-owns of the input is empty:

<input id="personal_state" aria-errormessage="personal.address.state-error" aria-invalid="false" autocomplete="off" role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-5--value" value="" style="width: 5px; box-sizing: content-box;">

Can we have a configuration where we can add the parent id? This way we can use the input props to add the attribute manually.

Complete markup:

<div class="Select select Select--single is-searchable has-value">
    <div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-5--value"><div class="Select-value"><span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">CA</span>
    </div>
    <div class="Select-input" style="display: inline-block;">
        <input id="personal_state" aria-errormessage="personal.address.state-error" aria-invalid="false" autocomplete="off" role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-5--value" value="" style="width: 5px; box-sizing: content-box;">
        <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
    </div>
    </span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
</div>

[jnachtigall]

Can we have a configuration where we can add the parent id?

@jrubstein Instead of adding a default aria-owns attribute as prop I would suggest that aria-owns is only added as attribute if it is not empty. An empty aria-owns is invalid, but if there is no aria-owns then the given DOM structure is used to tell the client to which element some other element belongs (kind of the default behaviour). Which seems to be what you'd want to do by assigning a parent id to aria-owns...

What you think?

I am not a a11y expert, but to my understanding to achieve this a simply check whether ariaOwns is empty at this line should do:

react-select/src/Select.js

Lines 898 to 906 in 97e2ef0

	const ariaOwns = classNames({
	[`${this._instancePrefix}-list`]: isOpen,
	});
	return (
	<div
	{...divProps}
	aria-expanded={isOpen}
	aria-owns={ariaOwns}

If so, I'd add a simple PR.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.