refactor(ui-radio-input,ui-form-field,ui-checkbox): add tests

Author: matyasf

packages/ui-checkbox/src/CheckboxGroup/__new-tests__/CheckboxGroup.test.tsx

@@ -88,8 +88,8 @@ describe('<CheckboxGroup />', () => {
     const { container } = renderCheckboxGroup({
       messages: [{ text: TEST_ERROR_MESSAGE, type: 'error' }]
     })
-    const fieldset = screen.getByRole('group')
-    const ariaDesc = fieldset.getAttribute('aria-describedby')
+    const group = screen.getByRole('group')
+    const ariaDesc = group.getAttribute('aria-describedby')
     const messageById = container.querySelector(`[id="${ariaDesc}"]`)
 
     expect(messageById).toBeInTheDocument()
@@ -217,5 +217,20 @@ describe('<CheckboxGroup />', () => {
 
       expect(axeCheck).toBe(true)
     })
+
+    it('adds the correct ARIA attributes', () => {
+      const { container } = renderCheckboxGroup({
+        disabled: true,
+        messages: [{ type: 'newError', text: 'abc' }],
+        // @ts-ignore This is a valid attribute
+        'data-id': 'group'
+      })
+      const group = container.querySelector(`[data-id="group"]`)
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveAttribute('role', 'group')
+      expect(group).toHaveAttribute('aria-disabled', 'true')
+      // ARIA role 'group' cannot have the 'aria-invalid' attribute
+      expect(group).not.toHaveAttribute('aria-invalid')
+    })
   })
 })

packages/ui-checkbox/src/CheckboxGroup/index.tsx

@@ -148,7 +148,6 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
         vAlign="top"
         messagesId={this._messagesId}
         elementRef={this.handleRef}
-        role="group"
       >
         {this.renderChildren()}
       </FormFieldGroup>

packages/ui-checkbox/src/CheckboxGroup/props.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React from 'react'
+import React, { type InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import { FormPropTypes } from '@instructure/ui-form-field'
@@ -32,7 +32,10 @@ import {
 } from '@instructure/ui-prop-types'
 
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import { Checkbox } from '../Checkbox'
@@ -58,7 +61,12 @@ type PropKeys = keyof CheckboxGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type CheckboxGroupProps = CheckboxGroupOwnProps & WithDeterministicIdProps
+type CheckboxGroupProps = CheckboxGroupOwnProps &
+  OtherHTMLAttributes<
+    CheckboxGroupOwnProps,
+    InputHTMLAttributes<CheckboxGroupOwnProps & Element>
+  > &
+  WithDeterministicIdProps
 
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,

packages/ui-form-field/src/FormFieldGroup/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children, ReactElement, AriaAttributes } from 'react'
 
 import { Grid } from '@instructure/ui-grid'
 import { pickProps, omitProps } from '@instructure/ui-react-utils'
@@ -84,7 +84,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
     return (
       !!this.props.messages &&
       this.props.messages.findIndex((message) => {
-        return message.type === 'error'
+        return message.type === 'error' || message.type === 'newError'
       }) >= 0
     )
   }
@@ -134,7 +134,33 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
 
   render() {
     const { styles, makeStyles, isGroup, ...props } = this.props
-
+    const role = props.role ? props.role : 'group'
+    // This is quite ugly, but according to ARIA spec
+    // the `aria-invalid` prop can only be used with certain roles
+    // see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid#associated_roles
+    let ariaInvalid: AriaAttributes['aria-invalid'] = undefined
+    if (
+      this.invalid &&
+      [
+        'application',
+        'checkbox',
+        'combobox',
+        'gridcell',
+        'listbox',
+        'radiogroup',
+        'slider',
+        'spinbutton',
+        'textbox',
+        'tree',
+        'columnheader',
+        'rowheader',
+        'searchbox',
+        'switch',
+        'treegrid'
+      ].includes(role)
+    ) {
+      ariaInvalid = 'true'
+    }
     return (
       <FormFieldLayout
         {...omitProps(props, FormFieldGroup.allowedProps)}
@@ -143,7 +169,8 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
         layout={props.layout === 'inline' ? 'inline' : 'stacked'}
         label={props.description}
         aria-disabled={props.disabled ? 'true' : undefined}
-        aria-invalid={this.invalid ? 'true' : undefined}
+        aria-invalid={ariaInvalid}
+        role={role}
         elementRef={this.handleRef}
         isGroup={isGroup}
       >

packages/ui-radio-input/src/RadioInputGroup/__new-tests__/RadioInputGroup.test.tsx

@@ -228,4 +228,25 @@ describe('<RadioInputGroup />', () => {
       expect(axeCheck).toBe(true)
     })
   })
+
+  it('adds the correct ARIA attributes', () => {
+    const { container } = render(
+      <RadioInputGroup
+        name="fruit"
+        description="Select a fruit"
+        disabled={true}
+        data-id="group"
+        messages={[{ type: 'newError', text: 'abc' }]}
+      >
+        <RadioInput label="Apple" value="apple" />
+        <RadioInput label="Banana" value="banana" />
+        <RadioInput label="Orange" value="orange" />
+      </RadioInputGroup>
+    )
+    const group = container.querySelector(`[data-id="group"]`)
+    expect(group).toBeInTheDocument()
+    expect(group).toHaveAttribute('role', 'radiogroup')
+    expect(group).toHaveAttribute('aria-disabled', 'true')
+    expect(group).toHaveAttribute('aria-invalid', 'true')
+  })
 })