diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx index fc37056c0b..fee0f152b5 100644 --- a/packages/react-select/src/Select.tsx +++ b/packages/react-select/src/Select.tsx @@ -87,6 +87,8 @@ export interface Props< 'aria-labelledby'?: AriaAttributes['aria-labelledby']; /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */ 'aria-live'?: AriaAttributes['aria-live']; + /** HTML ID of an element that should be used as a description (for assistive tech) */ + 'aria-describedby'?: AriaAttributes['aria-describedby']; /** Customise the messages used by the aria-live component */ ariaLiveMessages?: AriaLiveMessages; /** Focus the control when it is mounted */ @@ -1738,7 +1740,9 @@ export default class Select< 'aria-describedby': this.getElementId('live-region'), } : { - 'aria-describedby': this.getElementId('placeholder'), + 'aria-describedby': + this.props['aria-describedby'] || + this.getElementId('placeholder'), }), }; diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx index 0313149095..a7136ed60c 100644 --- a/packages/react-select/src/__tests__/Select.test.tsx +++ b/packages/react-select/src/__tests__/Select.test.tsx @@ -2230,6 +2230,28 @@ test('accessibility > aria-activedescendant should not exist if hideSelectedOpti ).toBe(''); }); +cases( + 'accessibility > passes through aria-describedby prop', + ({ props = { ...BASIC_PROPS, 'aria-describedby': 'testing' } }) => { + let { container } = render(