diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js index ff9fd049086..e2190c51a85 100644 --- a/src-docs/src/views/flyout/flyout.js +++ b/src-docs/src/views/flyout/flyout.js @@ -30,7 +30,6 @@ export default () => { if (isFlyoutVisible) { flyout = ( setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.js index a787f4631be..8b4be85cc2e 100644 --- a/src-docs/src/views/flyout/flyout_banner.js +++ b/src-docs/src/views/flyout/flyout_banner.js @@ -44,10 +44,7 @@ export default () => { if (isFlyoutVisible) { flyout = ( - +

A flyout with a banner

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index cce6ee80904..d5e8aab5703 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -178,7 +178,6 @@ export default () => { if (isFlyoutVisible) { flyout = ( diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index e341fe23d79..f94c6cbb0a5 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -37,7 +37,7 @@ import FlyoutWithBanner from './flyout_banner'; const flyoutWithBannerSource = require('!!raw-loader!./flyout_banner'); const flyoutWithBannerHtml = renderToHtml(FlyoutWithBanner); -const flyOutSnippet = ` +const flyOutSnippet = `

@@ -49,7 +49,7 @@ const flyOutSnippet = ` `; -const flyoutComplicatedSnippet = ` +const flyoutComplicatedSnippet = `

@@ -67,7 +67,7 @@ const flyoutComplicatedSnippet = ` `; -const flyoutSmallSnippet = ` +const flyoutSmallSnippet = `

@@ -79,7 +79,7 @@ const flyoutSmallSnippet = ` `; -const flyoutMaxWidthSnippet = ` +const flyoutMaxWidthSnippet = `

@@ -91,7 +91,7 @@ const flyoutMaxWidthSnippet = ` `; -const flyoutLargeSnippet = ` +const flyoutLargeSnippet = `

@@ -103,7 +103,7 @@ const flyoutLargeSnippet = ` `; -const flyoutWithBannerSnippet = ` +const flyoutWithBannerSnippet = `

@@ -130,24 +130,19 @@ export const FlyoutExample = { }, ], text: ( - <> +

EuiFlyout is a fixed position panel that pops in from the right side of the screen. It should be used any time you need to perform quick, individual actions to a larger page or list.

- - Use {'aria-labelledby={headingId}'} and{' '} - ownFocus to announce the flyout to screen - readers when the user opens it. - - } - /> - +

+ For accessibility, use{' '} + {'aria-labelledby={headingId}'} to announce the + flyout to screen readers when the user opens it. +

+
), props: { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody }, snippet: flyOutSnippet, @@ -200,7 +195,7 @@ export const FlyoutExample = { demo: , }, { - title: 'Small flyout, without ownFocus', + title: 'Small flyout, ownFocus', source: [ { type: GuideSectionTypes.JS, @@ -212,26 +207,12 @@ export const FlyoutExample = { }, ], text: ( - <> -

- In this example, we set size to{' '} - s and remove the ownFocus{' '} - prop. The latter not only removes the focus trap around the flyout, - but also removes the background overlay that reinforces your - boundaries. -

- - Removing ownFocus makes it difficult for - keyboard-only and screen reader users to navigate to and from - your flyout. - - } - /> - +

+ In this example, we set size to{' '} + s and apply the ownFocus prop. + The latter not only traps the focus of our flyout, but also adds + background overlay to reinforce your boundaries. +

), snippet: flyoutSmallSnippet, demo: , diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js index 45c16ed6a87..f1c2ce02929 100644 --- a/src-docs/src/views/flyout/flyout_large.js +++ b/src-docs/src/views/flyout/flyout_large.js @@ -20,7 +20,6 @@ export default () => { if (isFlyoutVisible) { flyout = ( diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index d781bb615de..5fafe0c0fe9 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -47,7 +47,6 @@ export default () => { flyout = ( { if (isFlyoutVisible) { flyout = ( diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js index d601a9de739..8c08fb43de5 100644 --- a/src-docs/src/views/modal/modal_example.js +++ b/src-docs/src/views/modal/modal_example.js @@ -77,7 +77,7 @@ export const ModalExample = {

Use a modal to temporarily interrupt a user’s current task and block interactions to the content below it. Be sure to read the full{' '} - modal usage guidelines. + modal usage guidelines.

), props: { EuiModal, EuiOverlayMask }, diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js index 8798fedd8f7..b1412892282 100644 --- a/src-docs/src/views/popover/popover.js +++ b/src-docs/src/views/popover/popover.js @@ -16,7 +16,6 @@ export default () => { return ( diff --git a/src-docs/src/views/popover/popover_block.js b/src-docs/src/views/popover/popover_block.js index 6462d4295e0..327486d094a 100644 --- a/src-docs/src/views/popover/popover_block.js +++ b/src-docs/src/views/popover/popover_block.js @@ -16,7 +16,6 @@ export default () => { return ( { return ( @@ -67,13 +65,13 @@ const popOverSnippet = ` `; const popoverAnchorSnippet = ``; const popoverWithTitleSnippet = ` @@ -102,7 +99,6 @@ const popoverPanelClassNameSnippet = ``; const popoverWithTitlePaddingSnippet = ``; const popoverContainerSnippet = ``; const popoverFixedSnippet = ``; const popoverBlockSnippet = `, }, + { + title: 'Trap focus', + source: [ + { + type: GuideSectionTypes.JS, + code: trapFocusSource, + }, + { + type: GuideSectionTypes.HTML, + code: trapFocusHtml, + }, + ], + text: ( +

+ If the popover should be responsible for trapping the focus within + itself (as opposed to a child component), then you should set{' '} + ownFocus. +

+ ), + snippet: trapFocusSnippet, + demo: , + }, { title: 'Anchor position', source: [ @@ -420,39 +435,5 @@ export const PopoverExample = { snippet: inputPopoverSnippet, demo: , }, - { - title: 'Removing the focus focus', - source: [ - { - type: GuideSectionTypes.JS, - code: trapFocusSource, - }, - { - type: GuideSectionTypes.HTML, - code: trapFocusHtml, - }, - ], - text: ( - <> -

- If the popover cannot trap focus within itself, then you can remove{' '} - ownFocus. -

- - Removing ownFocus makes it difficult for - keyboard-only and screen reader users to navigate to and from - your popover. - - } - /> - - ), - snippet: trapFocusSnippet, - demo: , - }, ], }; diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js index 6fa4e9e482a..e94932679dd 100644 --- a/src-docs/src/views/popover/popover_fixed.js +++ b/src-docs/src/views/popover/popover_fixed.js @@ -27,7 +27,6 @@ export default () => { Toggle Example {isExampleShown && ( { return ( diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js index 5f1a8db035f..73d8688cfc1 100644 --- a/src-docs/src/views/popover/trap_focus.js +++ b/src-docs/src/views/popover/trap_focus.js @@ -22,6 +22,7 @@ export default () => { return ( - - - Anchoring a tooltip to a non-interactive element makes it difficult - for keyboard-only and screen reader users to read. - - } - /> - - - - - Putting anything other than plain text in a tooltip is lost on - screen readers. Consider switching to{' '} - - EuiPopover - {' '} - if you need more content inside a tooltip. - - } - /> - - ), sections: [