Adding support for aria-describedby attribute

[ericj17]

Hi there,

We are looking to add aria-describedby attribute support in order to link help text and validation error elements to the react-select select input.

Proposing to add the following property the inputProps in Select.js

'aria-describedby': React.PropTypes.string,

Do you foresee any issues?

Thanks and Best Regards,
Eric

[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.

[bladey]

Re-opened due to pending PR #4082

[weswilke]

Any luck here? I'd like to pass through aria-describedby.

[emilie-t-ledn]

Any news regarding this issue? There is no way to add aria-describedby whether its using the prop directly on the select or when using a custom component, since it seems custom Input is not used when using isSearchable=false

https://codesandbox.io/s/codesandboxer-example-forked-dd105r?file=/example.tsx

[srajeev91]

I used React-Select to create a multi-select dropdown within Formik. I'm experiencing the same issue as the person in the comment above mine. I'm using Formik's Error Message component to display errors, and therefore need to pass an aria-describedby in my react-select Select component that corresponds to the Formik Error component's id. Would really appreciate if the aria-describeby attribute that we pass to the Select could be appended to the existing aria-describedby

[jphawk]

I have exactly the same issue, I have a custom error message and I need to set aria-describedby for either Select or internal Input. Once I do it, it's getting overwritten by a default value coming. Not convenient at all :/

[ryanscottaudio]

same issue here, would love a response, seems like it's been a whole since this was looked at

[wbolduc]

Bump

[adam-nicholas]

Also having this issue @bladey any chance anyone is looking into this?

[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