Add aria-describedby attribute #4082
Conversation
…reahard/react-select into sreahard-add-aria-describedby-attribute
bladey
added
category/accessibility
💥 No ChangesetLatest commit: 1f2614c Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂 If these changes should be published to npm, you need to add a changeset. This PR includes no changesetsWhen 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 |
bladey
added
the
pr/priority
|
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. Latest deployment of this branch, based on commit 1f2614c:
|
|
Nice! I just run into an issue with it. 🚀 Waiting for it to be released! @JedWatson |
|
Btw what about support for other aria attributes like |
|
I opened a PR (#4132) to add the aria attributes in a generic way. Please have a look at it. |
bladey
added
pr/in-review
| @@ -75,6 +75,8 @@ type FormatOptionLabelMeta = { | |||
| }; | |||
|
|
|||
| export type Props = { | |||
| /* HTML ID of an element that should be used to describe this input (for assistive tech) */ | |||
There was a problem hiding this comment.
This and labelledby should actually not have language in the comments that suggests a single element, as both of those props accept a separated LIST of IDs.
A space-separated list of element IDs
| /* HTML ID of an element that should be used to describe this input (for assistive tech) */ | |
| /* A space-separated list of element IDs that should be used to describe this input (for assistive tech) */ |
| @@ -75,6 +75,8 @@ type FormatOptionLabelMeta = { | |||
| }; | |||
|
|
|||
| export type Props = { | |||
| /* HTML ID of an element that should be used to describe this input (for assistive tech) */ | |||
| 'aria-describedby'?: string, | |||
| /* Aria label (for assistive tech) */ | |||
| 'aria-label'?: string, | |||
| /* HTML ID of an element that should be used as the label (for assistive tech) */ | |||
There was a problem hiding this comment.
| /* HTML ID of an element that should be used as the label (for assistive tech) */ | |
| /* A space-separated list of element IDs that should be used as the label (for assistive tech) */ |
| @@ -75,6 +75,8 @@ type FormatOptionLabelMeta = { | |||
| }; | |||
|
|
|||
| export type Props = { | |||
There was a problem hiding this comment.
An alternative suggestion:
import { AriaAttributes } from 'react';
// ...
// aria attributes makes the JSX "noisy", separated for clarity
const ariaAttributes = {
'aria-autocomplete': 'list',
'aria-describedby': this.props['aria-describedby'],
'aria-label': this.props['aria-label'],
'aria-labelledby': this.props['aria-labelledby'],
'aria-required': this.props['aria-required'],
'aria-invalid': this.props['aria-invalid'],
};
export type Props = Pick<AriaAttributes, keyof typeof ariaAttributes> & {
// ... the other props
};type Demo = keyof typeof ariaAttributes;
// Demo --> 'aria-autocomplete' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'
|
@bladey Any chance this PR could be rebased and reviewed? Our team would love to use React Select, but the lack of support for directly specifying |
|
@bladey same here, would love some 👀 on this |
As per PR #3273, updated again master and new tests.