[EuiForm] Add a11y labels to the EuiCallOut for validation errors (#4238

)
elastic · Nov 9, 2020 · ace700d · ace700d
1 parent fca50a4
commit ace700d
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
+- Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
 
 **Bug fixes**
 

diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap
@@ -16,6 +16,111 @@ exports[`EuiForm renders a form element 1`] = `
 />
 `;
 
+exports[`EuiForm renders with error callout when isInvalid is "true" 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    aria-live="assertive"
+    class="euiCallOut euiCallOut--danger euiForm__errors"
+    role="alert"
+  >
+    <div
+      class="euiCallOutHeader"
+    >
+      <span
+        class="euiCallOutHeader__title"
+      >
+        Please address the highlighted errors.
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiForm renders with error callout when isInvalid is "true" and has multiple errors 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    aria-live="assertive"
+    class="euiCallOut euiCallOut--danger euiForm__errors"
+    role="alert"
+  >
+    <div
+      class="euiCallOutHeader"
+    >
+      <span
+        class="euiCallOutHeader__title"
+      >
+        Please address the highlighted errors.
+      </span>
+    </div>
+    <div
+      class="euiText euiText--small"
+    >
+      <ul>
+        <li
+          class="euiForm__error"
+        >
+          <span>
+            This is one error
+          </span>
+        </li>
+        <li
+          class="euiForm__error"
+        >
+          <span>
+            This is another error
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiForm renders with error callout when isInvalid is "true" and has one error 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    aria-live="assertive"
+    class="euiCallOut euiCallOut--danger euiForm__errors"
+    role="alert"
+  >
+    <div
+      class="euiCallOutHeader"
+    >
+      <span
+        class="euiCallOutHeader__title"
+      >
+        Please address the highlighted errors.
+      </span>
+    </div>
+    <div
+      class="euiText euiText--small"
+    >
+      <ul>
+        <li
+          class="euiForm__error"
+        >
+          <span>
+            This is one error
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiForm renders without error callout when invalidCallout is "none" 1`] = `
 <div
   aria-label="aria-label"

diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
@@ -35,6 +35,36 @@ describe('EuiForm', () => {
 
     expect(component).toMatchSnapshot();
   });
+  test('renders with error callout when isInvalid is "true"', () => {
+    const component = render(<EuiForm {...requiredProps} isInvalid />);
+
+    expect(component).toMatchSnapshot();
+  });
+  test('renders with error callout when isInvalid is "true" and has one error', () => {
+    const component = render(
+      <EuiForm
+        {...requiredProps}
+        isInvalid
+        error={<span>This is one error</span>}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+  test('renders with error callout when isInvalid is "true" and has multiple errors', () => {
+    const component = render(
+      <EuiForm
+        {...requiredProps}
+        isInvalid
+        error={[
+          <span>This is one error</span>,
+          <span>This is another error</span>,
+        ]}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
   test('renders without error callout when invalidCallout is "none"', () => {
     const component = render(
       <EuiForm {...requiredProps} isInvalid invalidCallout="none" />

diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
@@ -82,7 +82,9 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
           <EuiCallOut
             className="euiForm__errors"
             title={addressFormErrors}
-            color="danger">
+            color="danger"
+            role="alert"
+            aria-live="assertive">
             {optionalErrors}
           </EuiCallOut>
         )}