Add option for custom aria-describedby

[Superman2971]

Provides support for issues: #5562 and #1570

I've tested my fork on local repository to confirm this does indeed pass the provided aria-describedby to the react-select. Also tested and passed the yarn lint, yarn type-check, and yarn test per CONTRIBUTING.MD

Our team needs this implemented to meet a11y support for our use of react-select. We have some custom hint and error messaging that is related to the Select and needs to be accessibly connected through aria-describedby. I'm hoping we can contribute to the library and make this available in a minor update to the package. Please let me know what I can do to assist in getting this PR approved and ready to merge :) Cheers!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 98aad8d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[Superman2971]

I'm afraid I can't re-run the unit tests and I'm unsure why the tests aren't running in CircleCI.

Locally all tests are running and pass (new test included)

Hopefully this won't block the PR from moving forward. Let me know any progress I can make for this on my end and I'll jump on it.

[plahteenlahti]

Hey @Superman2971 I think your test is correct but you just need to run prettier:check and fix the error, which I think is that

'aria-describedby': this.props['aria-describedby'] || this.getElementId('placeholder'),

should be on two lines to so that it goes under the max line length of prettiest default setting

[Superman2971]

you just need to run prettier:check and fix the error

Thank you @plahteenlahti! That was a good catch 👍 Now fixed 😄 ✅

[jacobsickels]

My team is waiting on this merge!

[alex84G]

We need this merge as well!

[lukebennett88]

Perhaps this should be:

Suggested change

	'aria-describedby':
	this.props['aria-describedby'] ||
	this.getElementId('placeholder'),
	'aria-describedby': [
	this.props['aria-describedby'],
	this.getElementId('placeholder'),
	]
	.filter(Boolean)
	.join(' '),

[oliverfarrell]

Is there anything in particular stopping this from being merged? Is it not something react-select is looking to support? There's definitely a use case for wanting a <Select /> with isSearchable={false} to also be described by another element on the page and to not solely rely on aria-errormessage. As a custom Input is not rendered when isSearchable is false, it makes particular behaviour tricky to achieve.