diff --git a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap index e7aef92e3e3..b9b1f969a8e 100644 --- a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap +++ b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiGlobalToastList is rendered 1`] = ` aria-live="polite" class="euiGlobalToastList testClass1 testClass2 emotion-euiGlobalToastList-right-euiTestCss" data-test-subj="test subject string" - role="region" + role="log" /> `; @@ -14,7 +14,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
{ expect(sharedProps.dismissToast).toHaveBeenCalledTimes(TOAST_COUNT); }); }); + + test('role', () => { + const { queryByRole } = render( + {}} + toastLifeTimeMs={5} + role="alert" + /> + ); + + expect(queryByRole('alert')).toBeInTheDocument(); + expect(queryByRole('log')).not.toBeInTheDocument(); + }); }); }); diff --git a/src/components/toast/global_toast_list.tsx b/src/components/toast/global_toast_list.tsx index d4ef17b2574..d623badfd0a 100644 --- a/src/components/toast/global_toast_list.tsx +++ b/src/components/toast/global_toast_list.tsx @@ -8,7 +8,8 @@ import React, { FunctionComponent, - ReactChild, + HTMLAttributes, + ReactNode, useCallback, useEffect, useRef, @@ -40,7 +41,7 @@ export const CLEAR_ALL_TOASTS_THRESHOLD_DEFAULT = 3; export interface Toast extends EuiToastProps { id: string; - text?: ReactChild; + text?: ReactNode; toastLifeTimeMs?: number; } @@ -63,6 +64,16 @@ export interface EuiGlobalToastListProps extends CommonProps { * Optional callback that fires when a user clicks the "Clear all" button. */ onClearAllToasts?: () => void; + /** + * Defaults to the [log role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/log_role). + * + * The [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) + * can be considered only if *all* toasts in this list will require immediate user attention. + * Several alerts at once, and unnecessary alerts, will a create bad screen reader user experience. + * + * @default log + */ + role?: HTMLAttributes['role']; } export const EuiGlobalToastList: FunctionComponent = ({ @@ -345,7 +356,7 @@ export const EuiGlobalToastList: FunctionComponent = ({ return (