From 5cde5e2b3f120ec0d334671bf01272f11b1183a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Ferna=CC=81ndez=20Haro?=
 <alejandro.haro@elastic.co>
Date: Mon, 9 Nov 2020 15:05:22 +0100
Subject: [PATCH] [EuiForm] Add a11y labels to the EuiCallOut for validation
 errors

---
 CHANGELOG.md                                  |   1 +
 .../form/__snapshots__/form.test.tsx.snap     | 105 ++++++++++++++++++
 src/components/form/form.test.tsx             |  30 +++++
 src/components/form/form.tsx                  |   4 +-
 4 files changed, 139 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee9bb243464..b59567ccde6 100644
--- 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
index 8fbbd3e7b7a..2fa55d63864 100644
--- 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
index 76c6aac1165..d6716bc0fb4 100644
--- 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
index 58c194cbd7d..4c7c2dce7a5 100644
--- 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>
         )}