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} )}