[Docs] Add warning about push flyout accessibility

+ misc fragment cleanup
elastic · Aug 10, 2023 · 5628b2f · 5628b2f
1 parent 39b5bf3
commit 5628b2f
Showing 1 changed file with 28 additions and 5 deletions.
diff --git 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: (
-        <Fragment>
+        <>
           <p>
             Another way to allow for continued interactions of the page content
             while a flyout is visible, is to change the <EuiCode>type</EuiCode>{' '}
@@ -329,7 +330,29 @@ export const FlyoutExample = {
             window widths. You can adjust this minimum breakpoint with{' '}
             <EuiCode>pushMinBreakpoint</EuiCode>.
           </p>
-        </Fragment>
+          <EuiCallOut
+            iconType="accessibility"
+            title="Push flyouts have less accessibility baked in than overlay flyouts"
+            color="warning"
+          >
+            <p>
+              Push flyouts do not use a focus trap, close on Escape key press,
+              inherit a{' '}
+              <EuiLink
+                href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role"
+                target="_blank"
+              >
+                dialog role
+              </EuiLink>
+              , or contain any of the default screen reader guidance that
+              overlay flyouts contain out-of-the-box.
+            </p>
+            <p>
+              Please be cautious when using push flyouts, and make sure you are
+              managing your own focus and screen reader UX.
+            </p>
+          </EuiCallOut>
+        </>
       ),
       snippet: flyoutPushedSnippet,
       demo: <FlyoutPush />,
@@ -344,7 +367,7 @@ export const FlyoutExample = {
         },
       ],
       text: (
-        <Fragment>
+        <>
           <p>
             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."
           />
-        </Fragment>
+        </>
       ),
       snippet: flyoutMaxWidthSnippet,
       demo: <FlyoutMaxWidth />,