aria-describedby not respected

[aakashsigdel]

Are you reporting a bug or runtime error? -> BUG

react-select doesn't respect aria-describedby as prop. This results in for errors not being pronounced by screen readers when focusing back on the field.

    <AsyncSelect
      onChange={handleSelect}
      loadOptions={loadOptions}
      placeholder={placeholder}
      inputId={id}
      aria-describedby="id-of-another-element"
    />

Example:
https://codesandbox.io/s/react-select-v5-sandbox-forked-i1vu1l

[wbolduc]

Bit of a workaround for right now

const Input = (props: InputProps) => {
	const passed_describedby = props.selectProps["aria-describedby"];
	const describedby =
		props["aria-describedby"] +
		(passed_describedby ? " " + passed_describedby : "");
	return <components.Input {...props} aria-describedby={describedby} />;
};

Which you can plug into your Select with

<ReactSelect
	components={{
		Input,
	}}
/>

This works okay because describedby accepts multiple ids. If you are using describedby to identify your errors your resolved description ends up looking like this "Select... Required" Which I think is okay

[cabillin]

+1 on this being an issue that I'd like to see fixed

Thanks for the workaround @wbolduc!

[prathamesh-voltup]

Thank you! @wbolduc