From 23fadba69923671ff6da12753c6f90fdd73abfa6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 27 Oct 2023 14:44:30 -0700
Subject: [PATCH 1/4] [EuiGlobalToastList] Switch to `role="log"`

---
 src/components/toast/global_toast_list.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/toast/global_toast_list.tsx b/src/components/toast/global_toast_list.tsx
index d4ef17b2574..2d48febf7d0 100644
--- a/src/components/toast/global_toast_list.tsx
+++ b/src/components/toast/global_toast_list.tsx
@@ -8,6 +8,7 @@
 
 import React, {
   FunctionComponent,
+  HTMLAttributes,
   ReactChild,
   useCallback,
   useEffect,
@@ -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<HTMLElement>['role'];
 }
 
 export const EuiGlobalToastList: FunctionComponent<EuiGlobalToastListProps> = ({
@@ -345,7 +356,7 @@ export const EuiGlobalToastList: FunctionComponent<EuiGlobalToastListProps> = ({
   return (
     <div
       aria-live="polite"
-      role="region"
+      role="log"
       ref={listElement}
       css={cssStyles}
       className={classes}

From 18f53216e5b2b838358f96eb65757297282bf097 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 27 Oct 2023 14:45:07 -0700
Subject: [PATCH 2/4] [misc] Remove deprecated React type

- never in seen this type before haha
---
 src/components/toast/global_toast_list.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/toast/global_toast_list.tsx b/src/components/toast/global_toast_list.tsx
index 2d48febf7d0..d623badfd0a 100644
--- a/src/components/toast/global_toast_list.tsx
+++ b/src/components/toast/global_toast_list.tsx
@@ -9,7 +9,7 @@
 import React, {
   FunctionComponent,
   HTMLAttributes,
-  ReactChild,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -41,7 +41,7 @@ export const CLEAR_ALL_TOASTS_THRESHOLD_DEFAULT = 3;
 
 export interface Toast extends EuiToastProps {
   id: string;
-  text?: ReactChild;
+  text?: ReactNode;
   toastLifeTimeMs?: number;
 }
 

From 72b304304c5c714ad0cc3d76b1938de55682ab1c Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 27 Oct 2023 14:55:41 -0700
Subject: [PATCH 3/4] changelog

---
 upcoming_changelogs/7328.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 upcoming_changelogs/7328.md

diff --git a/upcoming_changelogs/7328.md b/upcoming_changelogs/7328.md
new file mode 100644
index 00000000000..4b18bf69038
--- /dev/null
+++ b/upcoming_changelogs/7328.md
@@ -0,0 +1,5 @@
+- Added a configurable `role` prop to `EuiGlobalToastList`
+
+**Accessibility**
+
+- `EuiGlobalToastList` now defaults to a `log` role. If your toasts will always require immediate user action, consider (with caution) using the `alert` role instead.

From 1f699d54ce4747b548ba8b0fa190548788f79770 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 27 Oct 2023 14:58:36 -0700
Subject: [PATCH 4/4] Update tests

---
 .../__snapshots__/global_toast_list.test.tsx.snap   |  6 +++---
 src/components/toast/global_toast_list.test.tsx     | 13 +++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

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`] = `
 <div
   aria-live="polite"
   class="euiGlobalToastList emotion-euiGlobalToastList-left"
-  role="region"
+  role="log"
 >
   <div
     class="euiToast euiGlobalToastListItem emotion-euiToast-success-euiGlobalToastListItem"
@@ -117,7 +117,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
 <div
   aria-live="polite"
   class="euiGlobalToastList emotion-euiGlobalToastList-right"
-  role="region"
+  role="log"
 >
   <div
     class="euiToast euiGlobalToastListItem emotion-euiToast-success-euiGlobalToastListItem"
diff --git a/src/components/toast/global_toast_list.test.tsx b/src/components/toast/global_toast_list.test.tsx
index dee853144b3..196ae6e3df6 100644
--- a/src/components/toast/global_toast_list.test.tsx
+++ b/src/components/toast/global_toast_list.test.tsx
@@ -271,5 +271,18 @@ describe('EuiGlobalToastList', () => {
         expect(sharedProps.dismissToast).toHaveBeenCalledTimes(TOAST_COUNT);
       });
     });
+
+    test('role', () => {
+      const { queryByRole } = render(
+        <EuiGlobalToastList
+          dismissToast={() => {}}
+          toastLifeTimeMs={5}
+          role="alert"
+        />
+      );
+
+      expect(queryByRole('alert')).toBeInTheDocument();
+      expect(queryByRole('log')).not.toBeInTheDocument();
+    });
   });
 });