fix(ui-form-field): make JAWS read input field labels and form error separately

INSTUI-4568

Author: ToMESSKa

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

@@ -121,7 +121,7 @@ describe('<FormFieldGroup />', () => {
     const formFieldGroup = container.querySelector(
       "fieldset[class$='-formFieldLayout']"
     )
-    const message = container.querySelector("span[id^='FormFieldLayout_']")
+    const message = container.querySelector("div[id^='FormFieldLayout_']")
 
     expect(message).toBeInTheDocument()
     expect(formFieldGroup).toBeInTheDocument()

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

@@ -60,7 +60,7 @@ describe('<FormFieldMessages />', () => {
     const { container } = render(<FormFieldMessages messages={messages} />)
 
     const formFieldMessages = container.querySelector(
-      "span[class$='-formFieldMessages']"
+      "div[class$='-formFieldMessages']"
     )
 
     expect(formFieldMessages).toBeInTheDocument()
@@ -84,7 +84,7 @@ describe('<FormFieldMessages />', () => {
     const { container } = render(<FormFieldMessages messages={messages} />)
 
     const formFieldMessages = container.querySelector(
-      "span[class$='-formFieldMessages']"
+      "div[class$='-formFieldMessages']"
     )
     const iconSvg = container.querySelector('svg[name="IconWarning"]')
 

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

@@ -80,7 +80,7 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
     const { messages, styles } = this.props
 
     return messages && messages.length > 0 ? (
-      <span
+      <div
         css={styles?.formFieldMessages}
         {...omitProps(this.props, FormFieldMessages.allowedProps)}
         ref={this.handleRef}
@@ -92,7 +92,7 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
             </span>
           )
         })}
-      </span>
+      </div>
     ) : null
   }
 }