diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index 5d78b9b2e0c..5097bfb0c7b 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
import { Link } from 'react-router-dom';
import { GuideSectionTypes } from '../../components';
@@ -10,6 +10,7 @@ import {
EuiFlyoutHeader,
EuiFlyoutFooter,
EuiCallOut,
+ EuiLink,
} from '../../../../src/components';
import Flyout from './flyout';
@@ -315,7 +316,7 @@ export const FlyoutExample = {
},
],
text: (
-
+ <>
Another way to allow for continued interactions of the page content
while a flyout is visible, is to change the type{' '}
@@ -329,7 +330,29 @@ export const FlyoutExample = {
window widths. You can adjust this minimum breakpoint with{' '}
pushMinBreakpoint.
-
+
+
+ Push flyouts do not use a focus trap, do not close on Escape
+ keypress, do not inherit a{' '}
+
+ dialog role
+
+ , and do not include any of the default screen reader guidance
+ that overlay flyouts contain out-of-the-box.
+
+
+ Please be cautious when using push flyouts, and make sure you are
+ managing your own focus and screen reader UX.
+
By default, flyouts will continue to grow with the width of the
window. To stop this growth at an ideal width, set{' '}
@@ -355,7 +378,7 @@ export const FlyoutExample = {
color="warning"
title="Note that there are some caveats to providing a maxWidth that is smaller than the minWidth."
/>
-