diff --git a/src/components/Choice/Choice.Input.jsx b/src/components/Choice/Choice.Input.jsx index a16dcad69..c80233e33 100644 --- a/src/components/Choice/Choice.Input.jsx +++ b/src/components/Choice/Choice.Input.jsx @@ -122,6 +122,7 @@ class ChoiceInput extends React.PureComponent { state, type, value, + ariaDescribedBy, 'data-cy': dataCy, } = this.props const { isFocused } = this.state @@ -149,7 +150,7 @@ class ChoiceInput extends React.PureComponent { { const { helpText, stacked, state } = this.props + const { id: choiceID } = this.state const className = classNames('c-Choice__help-text', stacked && 'is-stacked') return ( helpText && ( - + {helpText} @@ -176,6 +177,7 @@ class Choice extends React.PureComponent { disabled, helpText, id: choiceID, + ariaDescribedBy: `${choiceID}_description`, inputRef, innerRef, kind, diff --git a/src/components/Choice/Choice.test.js b/src/components/Choice/Choice.test.js index 99ab72fe1..8e4b8c05c 100644 --- a/src/components/Choice/Choice.test.js +++ b/src/components/Choice/Choice.test.js @@ -133,6 +133,20 @@ describe('HelpText', () => { expect(text.text()).toBe(helpText) wrapper.unmount() }) + + test('Assigns ID to a helpText and use it on input as described by', () => { + const helpText = 'Help Text' + const wrapper = mount( + + ) + const text = wrapper.find('.c-HelpText').hostNodes() + + expect(text.prop('id')).toBe('test-id_description') + expect(wrapper.find('input').prop('aria-describedby')).toBe( + 'test-id_description' + ) + wrapper.unmount() + }) }) describe('Label', () => {