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 (