refactor(ui-form-field): do not read messages when reading label

instructure · Feb 6, 2025 · 6615f82 · 6615f82
1 parent 039eaa6
commit 6615f82
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 26 deletions.
diff --git a/packages/ui-form-field/src/FormFieldGroup/__new-tests__/FormFieldGroup.test.tsx b/packages/ui-form-field/src/FormFieldGroup/__new-tests__/FormFieldGroup.test.tsx
@@ -99,7 +99,7 @@ describe('<FormFieldGroup />', () => {
     expect(formFieldGroup).toBeInTheDocument()
   })
 
-  it.skip('links the messages to the group via aria-describedby', () => {
+  it('links the messages to the group via aria-describedby', () => {
     const messages: FormMessage[] = [{ text: 'Invalid name', type: 'error' }]
 
     const { container } = render(
@@ -122,7 +122,6 @@ describe('<FormFieldGroup />', () => {
     const formFieldGroup = container.querySelector(
       "span[class$='-formFieldLayout']"
     )
-    // TODO not working because there are 2 instances of FormFieldMessages
     const message = container.querySelector("span[class$='-formFieldMessages']")
     expect(message).toBeInTheDocument()
     expect(formFieldGroup).toBeInTheDocument()

diff --git a/packages/ui-form-field/src/FormFieldLayout/index.tsx b/packages/ui-form-field/src/FormFieldLayout/index.tsx
@@ -23,11 +23,8 @@
  */
 
 /** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { Component } from 'react'
-
+import { Component } from 'react'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
-import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { Grid } from '@instructure/ui-grid'
 import {
   omitProps,
@@ -45,6 +42,7 @@ import generateStyle from './styles'
 
 import { propTypes, allowedProps } from './props'
 import type { FormFieldLayoutProps } from './props'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 /**
 ---
@@ -61,7 +59,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   static defaultProps = {
     inline: false,
     layout: 'stacked',
-    as: 'span', // TODO why was this label???
+    as: 'span',
     labelAlign: 'end'
   } as const
 
@@ -124,26 +122,13 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
           textAlign={this.props.labelAlign}
           width={this.inlineContainerAndLabel ? 'auto' : 3}
         >
-          <FormFieldLabel id={this._labelId}>
-            {this.props.label}
-            {this.hasMessages && (
-              <ScreenReaderContent>
-                <FormFieldMessages messages={this.props.messages} />
-              </ScreenReaderContent>
-            )}
-          </FormFieldLabel>
+          <FormFieldLabel id={this._labelId}>{this.props.label}</FormFieldLabel>
         </Grid.Col>
       )
-    } else if (this.props.label || this.hasMessages) {
+    } else if (this.props.label) {
       return (
         <ScreenReaderContent id={this._labelId}>
-          {this.props.label && this.props.label}
-          {this.hasMessages && (
-            <>
-              ,
-              <FormFieldMessages messages={this.props.messages} />
-            </>
-          )}
+          {this.props.label}
         </ScreenReaderContent>
       )
     } else return null
@@ -184,9 +169,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
         css={styles?.formFieldLayout}
         style={{ width }}
         aria-describedby={this.hasMessages ? this._messagesId : undefined}
-        aria-labelledby={
-          this.props.label || this.hasMessages ? this._labelId : undefined
-        }
+        aria-labelledby={this.props.label ? this._labelId : undefined}
         ref={this.handleRef}
       >
         <Grid