refactor(ui-radio-input,ui-form-field): adda aria-errormessage, aria-describedby attributes

Author: matyasf

packages/ui-form-field/src/FormFieldGroup/__new-tests__/FormFieldGroup.test.tsx

@@ -29,6 +29,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check'
 import '@testing-library/jest-dom'
 
 import { FormFieldGroup } from '../index'
+import { FormMessage } from '../../FormPropTypes'
 
 describe('<FormFieldGroup />', () => {
   let consoleWarningMock: ReturnType<typeof vi.spyOn>
@@ -98,6 +99,41 @@ describe('<FormFieldGroup />', () => {
     expect(formFieldGroup).toBeInTheDocument()
   })
 
+  it('links the messages to the fieldset via aria-describedby', () => {
+    const messages: FormMessage[] = [{ text: 'Invalid name', type: 'error' }]
+
+    const { container } = render(
+      <FormFieldGroup
+        description="Please enter your full name"
+        messages={messages}
+      >
+        <label>
+          First: <input />
+        </label>
+        <label>
+          Middle: <input />
+        </label>
+        <label>
+          Last: <input />
+        </label>
+      </FormFieldGroup>
+    )
+
+    const formFieldGroup = container.querySelector(
+      "fieldset[class$='-formFieldLayout']"
+    )
+    const message = container.querySelector("span[id^='FormFieldLayout_']")
+
+    expect(message).toBeInTheDocument()
+    expect(formFieldGroup).toBeInTheDocument()
+    expect(formFieldGroup).toHaveAttribute('aria-describedby')
+
+    const messagesId = formFieldGroup!.getAttribute('aria-describedby')
+
+    expect(message).toHaveTextContent('Invalid name')
+    expect(message).toHaveAttribute('id', messagesId)
+  })
+
   it('displays description message inside the label', () => {
     const description = 'Please enter your full name'
 

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

@@ -144,6 +144,8 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
     // 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
+    // `aria-invalid` is put on in FormFieldLayout because the error message
+    // DOM part gets there its ID.
     let ariaInvalid: AriaAttributes['aria-invalid'] = undefined
     if (
       this.props.role &&

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

@@ -178,11 +178,14 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
 
     const hasNewErrorMsgAndIsGroup =
       !!messages?.find((m) => m.type === 'newError') && isGroup
-    // TODO use aria-errormessage here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage
     return (
       <ElementType
         {...omitProps(props, [...FormFieldLayout.allowedProps])}
         css={styles?.formFieldLayout}
+        aria-describedby={this.hasMessages ? this._messagesId : undefined}
+        aria-errormessage={
+          this.props['aria-invalid'] ? this._messagesId : undefined
+        }
         style={{ width }}
         ref={this.handleRef}
       >

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

@@ -248,5 +248,6 @@ describe('<RadioInputGroup />', () => {
     expect(group).toHaveAttribute('role', 'radiogroup')
     expect(group).toHaveAttribute('aria-disabled', 'true')
     expect(group).toHaveAttribute('aria-invalid', 'true')
+    expect(group).toHaveAttribute('aria-errormessage', expect.anything())
   })
 })