From ade91753db557d2e1a6829f177194232da4bd221 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 2 Feb 2023 13:34:43 -0800
Subject: [PATCH] [PR feedback] Remove `role` prop customization, tweak SR text
 accordingly

---
 .../collapsible_nav.test.tsx.snap             | 37 +++++---
 .../collapsible_nav/collapsible_nav.tsx       |  2 -
 .../flyout/__snapshots__/flyout.test.tsx.snap | 95 +++++--------------
 src/components/flyout/flyout.test.tsx         |  8 --
 src/components/flyout/flyout.tsx              | 38 +++-----
 upcoming_changelogs/6566.md                   |  1 +
 6 files changed, 58 insertions(+), 123 deletions(-)

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index c1646d2866ae..933e1e56d3dc 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -16,6 +16,7 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
@@ -23,10 +24,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -69,6 +70,7 @@ Array [
         data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
@@ -76,10 +78,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -117,6 +119,7 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 240px;"
       tabindex="0"
     >
@@ -124,10 +127,10 @@ Array [
         class="emotion-euiScreenReaderOnly"
         id="generated-id"
       >
-        You are in a nav. To close this nav, press Escape.  
+        You are in a non-modal dialog. To close the dialog, press Escape. 
       </p>
       <button
-        aria-label="Close this nav"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -170,6 +173,7 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
@@ -177,10 +181,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -219,6 +223,7 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
@@ -226,10 +231,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -266,6 +271,7 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size:320px"
       tabindex="0"
     />
@@ -294,6 +300,7 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
         tabindex="0"
       >
@@ -301,10 +308,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
@@ -346,6 +353,7 @@ Array [
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
       data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 320px;"
       tabindex="0"
     />
@@ -374,6 +382,7 @@ Array [
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 240px;"
         tabindex="0"
       >
@@ -381,10 +390,10 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a nav. To close this nav, press Escape. Or tap/click outside the nav on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
-          aria-label="Close this nav"
+          aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index de9e180934c7..210211bbfd27 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -65,7 +65,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   as = 'nav' as EuiCollapsibleNavProps['as'],
   size = 320,
   side = 'left',
-  role = null,
   ownFocus = true,
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
@@ -117,7 +116,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       as={as}
       size={size}
       side={side}
-      role={role}
       ownFocus={ownFocus}
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 044ba530e5ee..def4e660f76e 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -24,7 +24,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -73,7 +73,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -121,7 +121,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -169,7 +169,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="aria-label"
@@ -217,7 +217,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
       </div>
     </div>
@@ -252,7 +252,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -301,7 +301,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -350,7 +350,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -398,7 +398,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -446,7 +446,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -494,7 +494,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -541,7 +541,7 @@ Array [
         class="emotion-euiScreenReaderOnly"
         id="generated-id"
       >
-        You are in a dialog. To close this dialog, press Escape.  
+        You are in a non-modal dialog. To close the dialog, press Escape. 
       </p>
       <button
         aria-label="Close this dialog"
@@ -588,7 +588,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -636,7 +636,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -684,7 +684,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -732,7 +732,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -758,53 +758,6 @@ Array [
 ]
 `;
 
-exports[`EuiFlyout props role can be removed 1`] = `
-Array [
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <div
-        aria-describedby="generated-id"
-        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
-        data-autofocus="true"
-        tabindex="0"
-      >
-        <p
-          class="emotion-euiScreenReaderOnly"
-          id="generated-id"
-        >
-          You are in a div. To close this div, press Escape. Or tap/click outside the div on the shadowed overlay to close. 
-        </p>
-        <button
-          aria-label="Close this div"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>,
-]
-`;
-
 exports[`EuiFlyout props sides left is rendered 1`] = `
 Array [
   <div>
@@ -827,7 +780,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -875,7 +828,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -924,7 +877,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -972,7 +925,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -1020,7 +973,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -1068,7 +1021,7 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a dialog. To close this dialog, press Escape. Or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
         </p>
         <button
           aria-label="Close this dialog"
@@ -1165,9 +1118,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
             class="emotion-euiScreenReaderOnly"
             id="generated-id"
           >
-            You are in a dialog. To close this dialog, press Escape.
-             
-            Or tap/click outside the dialog on the shadowed overlay to close.
+            You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
              
             You can still continue tabbing through the page headers in addition to the dialog.
           </p>
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index 845458a27a86..eb8990f27859 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -72,14 +72,6 @@ describe('EuiFlyout', () => {
   });
 
   describe('props', () => {
-    test('role can be removed', () => {
-      const component = mount(<EuiFlyout onClose={() => {}} role={null} />);
-
-      expect(
-        takeMountedSnapshot(component, { hasArrayOutput: true })
-      ).toMatchSnapshot();
-    });
-
     test('hideCloseButton', () => {
       const component = mount(<EuiFlyout onClose={() => {}} hideCloseButton />);
 
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 92f21ae9248a..64e72ffc38ec 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -126,15 +126,6 @@ interface _EuiFlyoutProps {
    * @default right
    */
   side?: _EuiFlyoutSide;
-  /**
-   * Defaults to `dialog` which is best for most cases of the flyout.
-   *
-   * You may pass in your own aria role, or `null` to remove it and use the semantic `as` element instead,
-   * but be **extremely** cautious as this affects the instructions read out to screen readers.
-   *
-   * @default dialog
-   */
-  role?: null | string;
   /**
    * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
    * @default l
@@ -190,7 +181,6 @@ export const EuiFlyout = forwardRef(
       maskProps,
       type = 'overlay',
       outsideClickCloses,
-      role = 'dialog',
       pushMinBreakpoint = 'l',
       focusTrapProps: _focusTrapProps = {},
       includeFixedHeadersInFocusTrap = true,
@@ -303,11 +293,7 @@ export const EuiFlyout = forwardRef(
       ];
 
       closeButton = (
-        <EuiI18n
-          token="euiFlyout.closeAriaLabel"
-          default="Close this {role}"
-          values={{ role: role || Element }}
-        >
+        <EuiI18n token="euiFlyout.closeAriaLabel" default="Close this dialog">
           {(closeAriaLabel: string) => (
             <EuiButtonIcon
               css={closeButtonCssStyles}
@@ -369,23 +355,21 @@ export const EuiFlyout = forwardRef(
     const screenReaderDescription = (
       <EuiScreenReaderOnly>
         <p id={descriptionId}>
-          <EuiI18n
-            token="euiFlyout.screenReaderEscapeToClose"
-            default="You are in a {role}. To close this {role}, press Escape."
-            values={{ role: role || Element }}
-          />{' '}
-          {hasOverlayMask && (
+          {hasOverlayMask ? (
+            <EuiI18n
+              token="euiFlyout.screenReaderModalDialog"
+              default="You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+            />
+          ) : (
             <EuiI18n
-              token="euiFlyout.screenReaderTapToClose"
-              default="Or tap/click outside the {role} on the shadowed overlay to close."
-              values={{ role: role || Element }}
+              token="euiFlyout.screenReaderNonModalDialog"
+              default="You are in a non-modal dialog. To close the dialog, press Escape."
             />
           )}{' '}
           {fixedHeaders.length > 0 && (
             <EuiI18n
               token="euiFlyout.screenReaderFixedHeaders"
-              default="You can still continue tabbing through the page headers in addition to the {role}."
-              values={{ role: role || Element }}
+              default="You can still continue tabbing through the page headers in addition to the dialog."
             />
           )}
         </p>
@@ -428,7 +412,7 @@ export const EuiFlyout = forwardRef(
         <Element
           css={cssStyles}
           {...(rest as ComponentPropsWithRef<T>)}
-          role={role}
+          role="dialog"
           className={classes}
           tabIndex={0}
           data-autofocus
diff --git a/upcoming_changelogs/6566.md b/upcoming_changelogs/6566.md
index 01c5f5f2008b..533ec759a6e7 100644
--- a/upcoming_changelogs/6566.md
+++ b/upcoming_changelogs/6566.md
@@ -3,4 +3,5 @@
 
 **Breaking changes**
 
+- Removed the ability to customize the `role` prop of `EuiFlyout`s. `EuiFlyout`s should always be dialog roles for screen reader consistency.
 - Removed `closeButtonAriaLabel` prop from `EuiFlyout` - use `closeButtonProps['aria-label']` instead