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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
= ({
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 = ({
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.
- 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 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 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 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.
@@ -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.
- 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 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 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 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 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 are in a dialog. To close this dialog, press Escape.
+ You are in a non-modal dialog. To close the dialog, press Escape.
- 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 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 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 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 are in a div. To close this div, press Escape. Or tap/click outside the div on the shadowed overlay to close.
-
-
-
-
-
-
-
- ,
-]
-`;
-
exports[`EuiFlyout props sides left is rendered 1`] = `
Array [
@@ -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.
- 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 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 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 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 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 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.
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( {}} role={null} />);
-
- expect(
- takeMountedSnapshot(component, { hasArrayOutput: true })
- ).toMatchSnapshot();
- });
-
test('hideCloseButton', () => {
const component = mount( {}} 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 = (
-
+
{(closeAriaLabel: string) => (
- {' '}
- {hasOverlayMask && (
+ {hasOverlayMask ? (
+
+ ) : (
)}{' '}
{fixedHeaders.length > 0 && (
)}
@@ -428,7 +412,7 @@ export const EuiFlyout = forwardRef(
)}
- 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