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. +

+
+ ), snippet: flyoutPushedSnippet, demo: , @@ -344,7 +367,7 @@ export const FlyoutExample = { }, ], text: ( - + <>

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." /> - + ), snippet: flyoutMaxWidthSnippet, demo: , 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 b2da0e5c7f9..0c74dfef51e 100644 --- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap @@ -274,11 +274,8 @@ exports[`EuiCollapsibleNav props isDocked 1`] = ` >

@@ -91,13 +88,11 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = ` data-focus-lock-disabled="disabled" > @@ -183,6 +178,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full >