Rebase on master (#804)

Author: Luke Bowerman

packages/components/src/Form/Fields/Field.tsx

@@ -34,7 +34,8 @@ import { Label } from '../Label/Label'
 import { Paragraph } from '../../Text/Paragraph'
 import { Text } from '../../Text/Text'
 import { ValidationMessage } from '../ValidationMessage'
-import { FieldBaseProps, RequiredStar } from './FieldBase'
+import { FieldBaseProps } from './FieldBase'
+import { RequiredStar } from './RequiredStar'
 
 type ResponsiveSpaceValue = ResponsiveValue<TLengthStyledSystem>
 
@@ -86,6 +87,7 @@ export const fieldPropKeys = [
 
 export const pickFieldProps = (props: FieldProps) =>
   pick(props, [...fieldPropKeys, 'disabled', 'required', 'className'])
+
 export const omitFieldProps = (props: FieldProps) => omit(props, fieldPropKeys)
 
 /**
@@ -94,7 +96,11 @@ export const omitFieldProps = (props: FieldProps) => omit(props, fieldPropKeys)
  * feedback about the status of the input values.
  */
 
-const FieldLayout: FunctionComponent<FieldProps> = ({
+interface FieldPropsInternal extends FieldProps {
+  id: string
+}
+
+const FieldLayout: FunctionComponent<FieldPropsInternal> = ({
   className,
   children,
   description,
@@ -112,6 +118,10 @@ const FieldLayout: FunctionComponent<FieldProps> = ({
     </Paragraph>
   )
 
+  const fieldValidation = validationMessage && (
+    <ValidationMessage {...validationMessage} />
+  )
+
   return (
     <div className={className}>
       <Label htmlFor={id} fontWeight={labelFontWeight} fontSize={labelFontSize}>
@@ -120,9 +130,9 @@ const FieldLayout: FunctionComponent<FieldProps> = ({
       </Label>
       {detail && <FieldDetail>{detail}</FieldDetail>}
       <InputArea>{children}</InputArea>
-      <MessageArea>
-        {validationMessage && <ValidationMessage {...validationMessage} />}
+      <MessageArea id={`${id}-describedby`}>
         {fieldDescription}
+        {fieldValidation}
       </MessageArea>
     </div>
   )
@@ -137,7 +147,7 @@ FieldDetail.defaultProps = {
 const InputArea = styled.div``
 const MessageArea = styled.div``
 
-export const Field = styled(FieldLayout)`
+export const Field = styled(FieldLayout)<FieldPropsInternal>`
   height: fit-content;
   width: ${({ width }) => width || 'fit-content'};
   align-items: left;

packages/components/src/Form/Fields/FieldBase.tsx

@@ -23,8 +23,7 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import styled from 'styled-components'
+
 import { FontSizes, FontWeights } from '@looker/design-tokens'
 import { ValidationMessageProps } from '../ValidationMessage/ValidationMessage'
 
@@ -54,12 +53,3 @@ export interface FieldBaseProps {
    */
   validationMessage?: ValidationMessageProps
 }
-
-export const RequiredStar = styled((props) => (
-  <span {...props} aria-hidden="true">
-    {' '}
-    *
-  </span>
-))`
-  color: ${(props) => props.theme.colors.palette.red500};
-`

packages/components/src/Form/Fields/FieldCheckbox/FieldCheckbox.test.tsx

@@ -26,7 +26,11 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot, mountWithTheme } from '@looker/components-test-utils'
+import {
+  assertSnapshot,
+  mountWithTheme,
+  renderWithTheme,
+} from '@looker/components-test-utils'
 import { FieldCheckbox } from './FieldCheckbox'
 
 test('A FieldCheckbox', () => {
@@ -50,7 +54,7 @@ test('A required FieldCheckbox', () => {
   const wrapper = mountWithTheme(
     <FieldCheckbox id="FieldCheckboxID" label="👍" name="thumbsUp" required />
   )
-  expect(wrapper.text()).toMatch(`👍 *`)
+  expect(wrapper.text()).toMatch(`👍 required`)
 })
 
 test('A disabled FieldCheckbox', () => {
@@ -60,14 +64,21 @@ test('A disabled FieldCheckbox', () => {
   wrapper.find('input').html().includes('disabled=""')
 })
 
-test('A FieldCheckbox with an error validation aligned to the bottom', () => {
-  const wrapper = mountWithTheme(
+test('A FieldCheckbox with error has proper aria setup', () => {
+  const errorMessage = 'This is an error'
+
+  const { container, getByDisplayValue } = renderWithTheme(
     <FieldCheckbox
-      id="FieldCheckboxID"
-      label="👍"
-      name="thumbsUp"
-      validationMessage={{ message: 'This is an error', type: 'error' }}
+      id="test"
+      defaultValue="example"
+      validationMessage={{ message: errorMessage, type: 'error' }}
     />
   )
-  expect(wrapper.text()).toMatch(`👍This is an error`)
+
+  const input = getByDisplayValue('example')
+  const id = input.getAttribute('aria-describedby')
+  expect(id).toBeDefined()
+
+  const describedBy = container.querySelector(`#${id}`)
+  expect(describedBy).toHaveTextContent(errorMessage)
 })

packages/components/src/Form/Fields/FieldCheckbox/FieldCheckbox.tsx

@@ -41,11 +41,13 @@ const FieldCheckboxLayout = forwardRef(
     const { id = uuid() } = props
     return (
       <FieldInline
-        validationMessage={validationMessage}
         {...pickFieldProps(props)}
+        validationMessage={validationMessage}
+        id={id}
       >
         <Checkbox
           {...omitFieldProps(props)}
+          aria-describedby={`${id}-describedby`}
           id={id}
           validationType={validationMessage && validationMessage.type}
           ref={ref}

packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap

@@ -116,6 +116,7 @@ exports[`A FieldCheckbox 1`] = `
       className="c4 "
     >
       <input
+        aria-describedby="FieldCheckboxID-describedby"
         checked={false}
         id="FieldCheckboxID"
         name="thumbsUp"
@@ -146,6 +147,7 @@ exports[`A FieldCheckbox 1`] = `
   </div>
   <div
     className="c7 "
+    id="FieldCheckboxID-describedby"
   />
 </label>
 `;
@@ -266,6 +268,7 @@ exports[`A FieldCheckbox with checked value 1`] = `
       className="c4 "
     >
       <input
+        aria-describedby="FieldCheckboxID-describedby"
         checked={true}
         id="FieldCheckboxID"
         name="thumbsUp"
@@ -296,6 +299,7 @@ exports[`A FieldCheckbox with checked value 1`] = `
   </div>
   <div
     className="c7 "
+    id="FieldCheckboxID-describedby"
   />
 </label>
 `;

packages/components/src/Form/Fields/FieldColor/FieldColor.test.tsx

@@ -72,6 +72,40 @@ describe('FieldColor', () => {
     expect(queryByText('Error!')).toBeInTheDocument()
   })
 
+  test('A FieldColor with description has proper aria setup', () => {
+    const description = 'This is a description'
+
+    const { container, getByDisplayValue } = renderWithTheme(
+      <FieldColor id="test" defaultValue="example" description={description} />
+    )
+
+    const input = getByDisplayValue('example')
+    const id = input.getAttribute('aria-describedby')
+    expect(id).toBeDefined()
+
+    const describedBy = container.querySelector(`#${id}`)
+    expect(describedBy).toHaveTextContent(description)
+  })
+
+  test('A FieldColor with error has proper aria setup', () => {
+    const errorMessage = 'This is an error'
+
+    const { container, getByDisplayValue } = renderWithTheme(
+      <FieldColor
+        id="test"
+        defaultValue="example"
+        validationMessage={{ message: errorMessage, type: 'error' }}
+      />
+    )
+
+    const input = getByDisplayValue('example')
+    const id = input.getAttribute('aria-describedby')
+    expect(id).toBeDefined()
+
+    const describedBy = container.querySelector(`#${id}`)
+    expect(describedBy).toHaveTextContent(errorMessage)
+  })
+
   test('with an onChange', () => {
     const onChangeMock = jest.fn()
     const { getByLabelText } = renderWithTheme(

packages/components/src/Form/Fields/FieldColor/FieldColor.tsx

@@ -182,9 +182,9 @@ export const FieldColorComponent = forwardRef(
 
     return (
       <Field
+        {...pickFieldProps(props)}
         id={inputID}
         validationMessage={validationMessage}
-        {...pickFieldProps(props)}
       >
         <FormControl alignLabel="left">
           <Swatch
@@ -202,6 +202,7 @@ export const FieldColorComponent = forwardRef(
           {!hideInput && (
             <InputText
               {...omitFieldProps(props)}
+              aria-describedby={`${id}-describedby`}
               id={inputID}
               ref={ref}
               borderRadius="none"

packages/components/src/Form/Fields/FieldInline.tsx

@@ -28,19 +28,28 @@ import React, { FC } from 'react'
 import styled from 'styled-components'
 import { Label } from '../Label/Label'
 import { ValidationMessage } from '../ValidationMessage/ValidationMessage'
-import { FieldBaseProps, RequiredStar } from './FieldBase'
+import { FieldBaseProps } from './FieldBase'
+import { RequiredStar } from './RequiredStar'
 
 /**
  * `<FieldInline />` allows the rendering of a label (for FieldCheckbox, FieldRadio and FieldToggleSwitch),
  * and can render a validation message.
  * The label will always be placed on the right side of the input.
  */
 
-const FieldInlineLayout: FC<Omit<FieldBaseProps, 'labelFontWeight'>> = ({
+interface FieldInlinePropsInternal extends FieldBaseProps {
+  id: string
+}
+
+const FieldInlineLayout: FC<Omit<
+  FieldInlinePropsInternal,
+  'labelFontWeight'
+>> = ({
   className,
   children,
   label,
   labelFontSize,
+  id,
   required,
   validationMessage,
 }) => {
@@ -51,7 +60,7 @@ const FieldInlineLayout: FC<Omit<FieldBaseProps, 'labelFontWeight'>> = ({
         {required && <RequiredStar />}
       </Label>
       <InputArea>{children}</InputArea>
-      <MessageArea>
+      <MessageArea id={`${id}-describedby`}>
         {validationMessage ? (
           <ValidationMessage {...validationMessage} />
         ) : null}

packages/components/src/Form/Fields/FieldRadio/FieldRadio.tsx

@@ -40,8 +40,13 @@ const FieldRadioLayout = forwardRef(
   (props: FieldRadioProps, ref: Ref<HTMLInputElement>) => {
     const { id = uuid() } = props
     return (
-      <FieldInline {...pickFieldProps(props)}>
-        <Radio {...omitFieldProps(props)} id={id} ref={ref} />
+      <FieldInline {...pickFieldProps(props)} id={id}>
+        <Radio
+          {...omitFieldProps(props)}
+          aria-describedby={`${id}-describedby`}
+          id={id}
+          ref={ref}
+        />
       </FieldInline>
     )
   }

packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap

@@ -121,6 +121,7 @@ exports[`A FieldRadio 1`] = `
       className="c4 "
     >
       <input
+        aria-describedby="FieldRadioID-describedby"
         checked={false}
         id="FieldRadioID"
         name="thumbsUp"
@@ -136,6 +137,7 @@ exports[`A FieldRadio 1`] = `
   </div>
   <div
     className="c7 "
+    id="FieldRadioID-describedby"
   />
 </label>
 `;
@@ -261,6 +263,7 @@ exports[`A FieldRadio checked 1`] = `
       className="c4 "
     >
       <input
+        aria-describedby="FieldRadioID-describedby"
         checked={false}
         id="FieldRadioID"
         name="thumbsUp"
@@ -276,6 +279,7 @@ exports[`A FieldRadio checked 1`] = `
   </div>
   <div
     className="c7 "
+    id="FieldRadioID-describedby"
   />
 </label>
 `;