diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee9bb243464d..b84b16329438 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 ()
**Bug fixes**
diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap
index 8fbbd3e7b7ac..2fa55d638644 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`] = `
+
+`;
+
+exports[`EuiForm renders with error callout when isInvalid is "true" and has multiple errors 1`] = `
+
+`;
+
+exports[`EuiForm renders with error callout when isInvalid is "true" and has one error 1`] = `
+
+`;
+
exports[`EuiForm renders without error callout when invalidCallout is "none" 1`] = `
{
expect(component).toMatchSnapshot();
});
+ test('renders with error callout when isInvalid is "true"', () => {
+ const component = render();
+
+ expect(component).toMatchSnapshot();
+ });
+ test('renders with error callout when isInvalid is "true" and has one error', () => {
+ const component = render(
+ This is one error}
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ test('renders with error callout when isInvalid is "true" and has multiple errors', () => {
+ const component = render(
+ This is one error,
+ This is another error,
+ ]}
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
test('renders without error callout when invalidCallout is "none"', () => {
const component = render(
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 58c194cbd7d8..4c7c2dce7a57 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -82,7 +82,9 @@ export const EuiForm: FunctionComponent = ({
+ color="danger"
+ role="alert"
+ aria-live="assertive">
{optionalErrors}
)}