fix: Change the error message ID to include the error icon (#562)

Author: abdamarw

src/form-field/__tests__/form-field-context.test.tsx

@@ -8,6 +8,9 @@ import {
   useFormFieldContext,
   FormFieldValidationControlProps,
 } from '../../../lib/components/internal/context/form-field-context';
+import styles from '../../../lib/components/form-field/styles.css.js';
+
+const errorSelector = `:scope > .${styles.hints} .${styles.error}`;
 
 const TestControl = () => {
   const contextValues = useFormFieldContext({});
@@ -253,11 +256,11 @@ describe('nested form fields', () => {
       </FormField>
     );
 
-    const outerErrorId = outerFormFieldWrapper.findError()?.getElement().id;
+    const outerErrorId = outerFormFieldWrapper.find(errorSelector)?.getElement().id;
     const outerDescriptionId = outerFormFieldWrapper.findDescription()?.getElement().id;
     const outerConstraintId = outerFormFieldWrapper.findConstraint()?.getElement().id;
 
-    const innerErrorId = innerFormFieldWrapper.findError()?.getElement().id;
+    const innerErrorId = innerFormFieldWrapper.find(errorSelector)?.getElement().id;
     const innerDescriptionId = innerFormFieldWrapper.findDescription()?.getElement().id;
     const innerConstraintId = innerFormFieldWrapper.findConstraint()?.getElement().id;
 

src/form-field/__tests__/form-field-control-id.test.tsx

@@ -5,9 +5,12 @@ import { render } from '@testing-library/react';
 import FormField, { FormFieldProps } from '../../../lib/components/form-field';
 import Input from '../../../lib/components/input';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import styles from '../../../lib/components/form-field/styles.css.js';
 
 const testInput = <Input value="follow me on tiktok" onChange={() => {}} />;
 
+const errorSelector = `:scope > .${styles.hints} .${styles.error}`;
+
 function renderFormField(props: FormFieldProps = {}) {
   const renderResult = render(<FormField {...props} />);
   return createWrapper(renderResult.container).findFormField()!;
@@ -33,7 +36,7 @@ describe('controlId', () => {
 
     test('renders id for errorText based on controlId', () => {
       const wrapper = renderFormField({ controlId: formFieldControlId, errorText: 'Test error' });
-      expect(wrapper.findError()?.getElement().id).toBe(`${formFieldControlId}-error`);
+      expect(wrapper.find(errorSelector)?.getElement().id).toBe(`${formFieldControlId}-error`);
     });
 
     test('renders id for constraintText based on controlId', () => {
@@ -52,7 +55,7 @@ describe('controlId', () => {
 
       expect(wrapper.findLabel()?.getElement()).toHaveAttribute('for', formFieldControlId);
       expect(wrapper.findDescription()?.getElement().id).toBe(`${formFieldControlId}-description`);
-      expect(wrapper.findError()?.getElement().id).toBe(`${formFieldControlId}-error`);
+      expect(wrapper.find(errorSelector)?.getElement().id).toBe(`${formFieldControlId}-error`);
       expect(wrapper.findConstraint()?.getElement().id).toBe(`${formFieldControlId}-constraint`);
     });
 
@@ -109,7 +112,7 @@ describe('controlId', () => {
 
     test('generates own id and uses it for errorText', () => {
       const wrapper = renderFormField({ errorText: 'Test error' });
-      expect(wrapper.findError()?.getElement()).toHaveAttribute('id');
+      expect(wrapper.find(errorSelector)?.getElement()).toHaveAttribute('id');
     });
 
     test('generates own id and uses it for constraintText', () => {
@@ -129,7 +132,7 @@ describe('controlId', () => {
 
       expect(labelId).not.toBeUndefined();
       expect(wrapper.findDescription()?.getElement().id).toBe(labelId?.replace('label', 'description'));
-      expect(wrapper.findError()?.getElement().id).toBe(labelId?.replace('label', 'error'));
+      expect(wrapper.find(errorSelector)?.getElement().id).toBe(labelId?.replace('label', 'error'));
       expect(wrapper.findConstraint()?.getElement().id).toBe(labelId?.replace('label', 'constraint'));
     });
 

src/form-field/internal.tsx

@@ -23,15 +23,13 @@ interface FormFieldErrorProps {
 }
 
 export const FormFieldError = ({ id, children, errorIconAriaLabel }: FormFieldErrorProps) => (
-  <div className={styles.error}>
+  <div id={id} className={styles.error}>
     <div className={styles['error-icon-shake-wrapper']}>
       <div role="img" aria-label={errorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>
         <InternalIcon name="status-warning" size="small" />
       </div>
     </div>
-    <span id={id} className={styles.error__message}>
-      {children}
-    </span>
+    <span className={styles.error__message}>{children}</span>
   </div>
 );
 

src/test-utils/dom/form-field/index.ts

@@ -23,7 +23,7 @@ export default class FormFieldWrapper extends ComponentWrapper<HTMLElement> {
   }
 
   findError(): ElementWrapper | null {
-    return this.find(`:scope > .${styles.hints} .${styles.error__message}`);
+    return this.find(`:scope > .${styles.hints} .${styles.error} .${styles.error__message}`);
   }
 
   findDescription(): ElementWrapper | null {