Associate FormControl.Validation with the relevant input (#818)

* add tests for FormControl hint and validation association

* implement FormControl validation association

* add changeset

* default aria-describedby to undefined

Author: joshfarrant

.changeset/cuddly-kids-dance.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+`FormControl.Validation` is now associated with the relevant input using `aria-describedby`.

packages/react/src/forms/FormControl/FormControl.test.tsx

@@ -219,4 +219,51 @@ describe('FormControl', () => {
     expect(labelEl?.classList).toContain('FormControl-label--large')
     expect(inputEl.classList).toContain(`TextInput--large`)
   })
+
+  it('associates the hint with the input', () => {
+    const {getByLabelText, getByText} = render(
+      <FormControl>
+        <FormControl.Label>My Label</FormControl.Label>
+        <TextInput />
+        <FormControl.Hint>A useful hint</FormControl.Hint>
+      </FormControl>,
+    )
+
+    const input = getByLabelText('My Label')
+    const hint = getByText('A useful hint')
+
+    expect(input).toHaveAttribute('aria-describedby', hint.id)
+  })
+
+  it('associates the validation with the input', () => {
+    const {getByLabelText, getByText} = render(
+      <FormControl>
+        <FormControl.Label>My Label</FormControl.Label>
+        <TextInput />
+        <FormControl.Validation>LGTM</FormControl.Validation>
+      </FormControl>,
+    )
+
+    const input = getByLabelText('My Label')
+    const validation = getByText('LGTM')
+
+    expect(input).toHaveAttribute('aria-describedby', validation.id)
+  })
+
+  it('associates both a hint and validation with the input', () => {
+    const {getByLabelText, getByText} = render(
+      <FormControl>
+        <FormControl.Label>My Label</FormControl.Label>
+        <TextInput />
+        <FormControl.Hint>A useful hint</FormControl.Hint>
+        <FormControl.Validation>LGTM</FormControl.Validation>
+      </FormControl>,
+    )
+
+    const input = getByLabelText('My Label')
+    const hint = getByText('A useful hint')
+    const validation = getByText('LGTM')
+
+    expect(input).toHaveAttribute('aria-describedby', `${hint.id} ${validation.id}`)
+  })
 })

packages/react/src/forms/FormControl/FormControl.tsx

@@ -72,6 +72,9 @@ const Root = ({
   )
 
   const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)
+  const containsValidation = childrenArr.some(
+    child => React.isValidElement(child) && child.type === FormControlValidation,
+  )
 
   return (
     <section
@@ -88,7 +91,10 @@ const Root = ({
       {React.Children.map(children, child => {
         if (!React.isValidElement(child)) return
 
-        const describedBy = containsHint ? `${uniqueId}-hint` : undefined
+        const describedBy =
+          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]
+            .filter(Boolean)
+            .join(' ') || undefined
 
         switch (child.type) {
           case TextInput:
@@ -140,6 +146,7 @@ const Root = ({
             return React.cloneElement(child as React.ReactElement, {
               className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], child.props.className),
               validationStatus,
+              id: `${uniqueId}-validation`,
             })
 
           case FormControlHint:
@@ -213,7 +220,7 @@ type FormControlValidationProps = {
   validationStatus?: FormValidationStatus
 } & BaseProps<HTMLSpanElement>
 
-const FormControlValidation = ({children, validationStatus, className}: FormControlValidationProps) => {
+const FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {
   return (
     <span
       className={clsx(
@@ -222,6 +229,7 @@ const FormControlValidation = ({children, validationStatus, className}: FormCont
         validationStatus && styles[`FormControl-validation--${validationStatus}`],
         className,
       )}
+      {...props}
     >
       {validationStatus === 'error' && (
         <span className={styles['FormControl-validation-error-icon']}>