Fix aria-describedby attribute on Choice component to use id, not raw…

… text (#1018)

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 {
       <InputUI className={componentClassName}>
         <InputInputUI
           autoFocus={autoFocus}
-          aria-describedby={helpText || undefined}
+          aria-describedby={ariaDescribedBy || undefined}
           aria-invalid={state === 'error'}
           checked={checked}
           className={inputClassName}
@@ -212,6 +213,8 @@ ChoiceInput.propTypes = {
   'data-cy': PropTypes.string,
   disabled: PropTypes.bool,
   helpText: PropTypes.string,
+  /** ID of element that describes this input */
+  ariaDescribedBy: PropTypes.string,
   id: PropTypes.string,
   inputRef: PropTypes.func,
   innerRef: PropTypes.func,

src/components/Choice/Choice.jsx

@@ -128,13 +128,14 @@ class Choice extends React.PureComponent {
 
   getHelpTextMarkup = () => {
     const { helpText, stacked, state } = this.props
+    const { id: choiceID } = this.state
 
     const className = classNames('c-Choice__help-text', stacked && 'is-stacked')
 
     return (
       helpText && (
         <ChoiceHelpTextUI className={className}>
-          <HelpText state={state} muted>
+          <HelpText state={state} muted id={`${choiceID}_description`}>
             {helpText}
           </HelpText>
         </ChoiceHelpTextUI>
@@ -176,6 +177,7 @@ class Choice extends React.PureComponent {
       disabled,
       helpText,
       id: choiceID,
+      ariaDescribedBy: `${choiceID}_description`,
       inputRef,
       innerRef,
       kind,

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(
+      <Choice label="Label" helpText={helpText} id="test-id" />
+    )
+    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', () => {