feat(FormField): make form field error accessible (#3822)

* feat(FormField): make form field error accessible

* Change type of id on FormField

* Add alert role on error labels and include error example

Author: aoelen

docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js

@@ -37,6 +37,16 @@ const FormExampleFieldControlId = () => (
       label='Opinion'
       placeholder='Opinion'
     />
+    <Form.Field
+      id='form-input-control-error-email'
+      control={Input}
+      label='Email'
+      placeholder='joe@schmoe.com'
+      error={{
+        content: 'Please enter a valid email address',
+        pointing: 'below',
+      }}
+    />
     <Form.Field
       id='form-button-control-public'
       control={Button}

docs/src/examples/collections/Form/Shorthand/index.js

@@ -93,7 +93,7 @@ const FormTypesExamples = () => (
 
     <ComponentExample
       title='Accessible Labels'
-      description='Adding an id to a shorthand Form.Field adds a matching htmlFor prop to the label.'
+      description='Adding an id to a shorthand Form.Field adds a matching htmlFor prop to the label. In case of an error, the aria-describedby prop is used to connect the error label to the form field.'
       examplePath='collections/Form/Shorthand/FormExampleFieldControlId'
     />
 

docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js

@@ -8,6 +8,7 @@ const FormExampleFieldErrorLabel = () => (
       fluid
       label='First name'
       placeholder='First name'
+      id='form-input-first-name'
     />
     <Form.Input
       error='Please enter your last name'

src/collections/Form/FormField.d.ts

@@ -38,6 +38,9 @@ export interface StrictFormFieldProps {
   /** Individual fields may display an error state along with a message. */
   error?: boolean | SemanticShorthandItem<LabelProps>
 
+  /** The id of the control */
+  id?: number | string
+
   /** A field can have its label next to instead of above it. */
   inline?: boolean
 

src/collections/Form/FormField.js

@@ -41,6 +41,7 @@ function FormField(props) {
     required,
     type,
     width,
+    id,
   } = props
 
   const classes = cx(
@@ -58,7 +59,13 @@ function FormField(props) {
   const errorPointing = _.get(error, 'pointing', 'above')
   const errorLabel = Label.create(error, {
     autoGenerateKey: false,
-    defaultProps: { prompt: true, pointing: errorPointing },
+    defaultProps: {
+      prompt: true,
+      pointing: errorPointing,
+      id: id ? `${id}-error-message` : undefined,
+      role: 'alert',
+      'aria-atomic': true,
+    },
   })
 
   const errorLabelBefore = (errorPointing === 'below' || errorPointing === 'right') && errorLabel
@@ -89,15 +96,21 @@ function FormField(props) {
   // ----------------------------------------
   // Checkbox/Radio Control
   // ----------------------------------------
-  const controlProps = { ...rest, content, children, disabled, required, type }
+
+  const ariaDescribedBy = id && error ? `${id}-error-message` : null
+  const ariaAttrs = {
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': error !== undefined ? true : undefined,
+  }
+  const controlProps = { ...rest, content, children, disabled, required, type, id }
 
   // wrap HTML checkboxes/radios in the label
   if (control === 'input' && (type === 'checkbox' || type === 'radio')) {
     return (
       <ElementType className={classes}>
         <label>
           {errorLabelBefore}
-          {createElement(control, controlProps)} {label}
+          {createElement(control, { ...ariaAttrs, ...controlProps })} {label}
           {errorLabelAfter}
         </label>
       </ElementType>
@@ -109,7 +122,7 @@ function FormField(props) {
     return (
       <ElementType className={classes}>
         {errorLabelBefore}
-        {createElement(control, { ...controlProps, label })}
+        {createElement(control, { ...ariaAttrs, ...controlProps, label })}
         {errorLabelAfter}
       </ElementType>
     )
@@ -122,11 +135,11 @@ function FormField(props) {
   return (
     <ElementType className={classes}>
       {createHTMLLabel(label, {
-        defaultProps: { htmlFor: _.get(controlProps, 'id') },
+        defaultProps: { htmlFor: id },
         autoGenerateKey: false,
       })}
       {errorLabelBefore}
-      {createElement(control, controlProps)}
+      {createElement(control, { ...ariaAttrs, ...controlProps })}
       {errorLabelAfter}
     </ElementType>
   )
@@ -161,6 +174,9 @@ FormField.propTypes = {
   /** Individual fields may display an error state along with a message. */
   error: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
 
+  /** The id of the control */
+  id: PropTypes.string,
+
   /** A field can have its label next to instead of above it. */
   inline: PropTypes.bool,
 

test/specs/collections/Form/FormField-test.js

@@ -41,25 +41,45 @@ describe('FormField', () => {
       autoGenerateKey: false,
       propKey: 'error',
       requiredProps: { label: faker.lorem.word() },
-      shorthandDefaultProps: { prompt: true, pointing: 'above' },
+      shorthandDefaultProps: {
+        prompt: true,
+        pointing: 'above',
+        role: 'alert',
+        'aria-atomic': true,
+      },
     })
     common.implementsLabelProp(FormField, {
       autoGenerateKey: false,
       propKey: 'error',
       requiredProps: { control: 'radio' },
-      shorthandDefaultProps: { prompt: true, pointing: 'above' },
+      shorthandDefaultProps: {
+        prompt: true,
+        pointing: 'above',
+        role: 'alert',
+        'aria-atomic': true,
+      },
     })
     common.implementsLabelProp(FormField, {
       autoGenerateKey: false,
       propKey: 'error',
       requiredProps: { control: Checkbox },
-      shorthandDefaultProps: { prompt: true, pointing: 'above' },
+      shorthandDefaultProps: {
+        prompt: true,
+        pointing: 'above',
+        role: 'alert',
+        'aria-atomic': true,
+      },
     })
     common.implementsLabelProp(FormField, {
       autoGenerateKey: false,
       propKey: 'error',
       requiredProps: { control: 'input' },
-      shorthandDefaultProps: { prompt: true, pointing: 'above' },
+      shorthandDefaultProps: {
+        prompt: true,
+        pointing: 'above',
+        role: 'alert',
+        'aria-atomic': true,
+      },
     })
 
     it('positioned in DOM according to passed "pointing" prop', () => {