fix(fuselage-forms): missing role alert on FieldError (#1921)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>

Author: juliajforesti

.changeset/wicked-lights-buy.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage-forms': patch
+---
+
+fix(fuselage-forms): missing `role alert` on `FieldError`

packages/fuselage-forms/src/Field/Field.stories.tsx

@@ -235,12 +235,13 @@ export const WithUrlInput: StoryFn<typeof Field> = () => (
 
 export const WithSelect: StoryFn<typeof Field> = () => (
   <Field>
-    <FieldRow>
-      <FieldLabel required>
-        Example Select
-        <FieldLabelInfo title='with extra info in a tooltip' />
-      </FieldLabel>
-    </FieldRow>
+    <FieldLabel required>
+      Example Select
+      <FieldLabelInfo title='with extra info in a tooltip' />
+    </FieldLabel>
+    <FieldDescription>
+      You can select a single option from a list of options
+    </FieldDescription>
     <FieldRow>
       <Select
         options={[
@@ -257,13 +258,7 @@ export const WithSelect: StoryFn<typeof Field> = () => (
         ]}
       />
     </FieldRow>
-
-    <FieldRow>
-      <FieldDescription>
-        You can select a single option from a list of options
-      </FieldDescription>
-      <FieldError>You failed to enter a valid value</FieldError>
-    </FieldRow>
+    <FieldError>You failed to enter a valid value</FieldError>
     <FieldRow>
       <FieldHint>This should help the user enter a valid value</FieldHint>
       <FieldLink href='#'>Link to more information</FieldLink>

packages/fuselage-forms/src/Field/FieldError.spec.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react';
+
+import { TextInput } from '../Inputs';
+
+import { Field, FieldLabel, FieldError } from '.';
+
+it('should have an alert element', () => {
+  const { container } = render(
+    <Field>
+      <FieldLabel>Test Field</FieldLabel>
+      <TextInput />
+      <FieldError>Error message</FieldError>
+    </Field>,
+  );
+
+  expect(container).toContainElement(container.querySelector('[role="alert"]'));
+});
+
+it('should have an id that matches the aria-describedby on the input', () => {
+  const { container } = render(
+    <Field>
+      <FieldLabel>Test Field</FieldLabel>
+      <TextInput />
+      <FieldError>Error message</FieldError>
+    </Field>,
+  );
+
+  const input = container.querySelector('input');
+  const ariaDescribedBy = input?.getAttribute('aria-describedby');
+  expect(ariaDescribedBy).toBeTruthy();
+
+  const errorElement = container.querySelector('[role="alert"]');
+  const errorId = errorElement?.getAttribute('id');
+
+  expect(ariaDescribedBy).toContain(errorId);
+});
+
+it('should set aria-invalid="true" on the input when error is present', () => {
+  const { container } = render(
+    <Field>
+      <FieldLabel>Test Field</FieldLabel>
+      <TextInput />
+      <FieldError>Error message</FieldError>
+    </Field>,
+  );
+
+  const input = container.querySelector('input');
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+});
+
+it('should set aria-invalid="false" on the input when no error is present', () => {
+  const { container } = render(
+    <Field>
+      <FieldLabel>Test Field</FieldLabel>
+      <TextInput />
+    </Field>,
+  );
+
+  const input = container.querySelector('input');
+  expect(input).toHaveAttribute('aria-invalid', 'false');
+});

packages/fuselage-forms/src/Field/FieldError.tsx

@@ -9,9 +9,8 @@ type FieldErrorProps = { children: ReactNode } & ComponentProps<
 
 const FieldError = ({ children, ...props }: FieldErrorProps) => {
   const id = useFieldDescriptorId('error');
-
   return (
-    <FieldErrorComponent {...props} id={id}>
+    <FieldErrorComponent {...props} id={id} role='alert'>
       {children}
     </FieldErrorComponent>
   );

packages/fuselage-forms/src/__snapshots__/test.spec.tsx.snap

@@ -66,6 +66,7 @@ exports[`renders WithCheckbox without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r7:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -146,6 +147,7 @@ exports[`renders WithEmailInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r1:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -284,6 +286,7 @@ exports[`renders WithMultiSelect without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:rb:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -364,6 +367,7 @@ exports[`renders WithNumberInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r9:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -458,6 +462,7 @@ exports[`renders WithPasswordInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r2:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -549,6 +554,7 @@ exports[`renders WithRadioButton without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r5:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -629,6 +635,7 @@ exports[`renders WithSearchInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r3:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -750,6 +757,7 @@ exports[`renders WithSlider without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:rc:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -830,6 +838,7 @@ exports[`renders WithTelephoneInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r8:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -910,6 +919,7 @@ exports[`renders WithTextArea without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r4:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -990,6 +1000,7 @@ exports[`renders WithTextInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r0:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -1081,6 +1092,7 @@ exports[`renders WithToggleSwitch without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:r6:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>
@@ -1161,6 +1173,7 @@ exports[`renders WithUrlInput without crashing 1`] = `
       <span
         class="rcx-box rcx-box--full rcx-field__error"
         id="react-aria-:ra:-error"
+        role="alert"
       >
         You failed to enter a valid value
       </span>