From a9c5c3f2e4e4cca29803da1a7a5aa6cbc7ae9e9f Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 21 Mar 2022 09:23:37 -0400 Subject: [PATCH 1/3] chore(Dropdown): update examples to show different appends --- .../components/Dropdown/examples/Dropdown.md | 84 +++++++++++++------ 1 file changed, 60 insertions(+), 24 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 43383bf8ba9..7ea4e73c091 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -18,6 +18,10 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg'; ## Examples +When passing in a value to the `menuAppendTo` prop on the Dropdown component, passing in `document.body` should be avoided if possible as doing so can cause accessibility issues. These issues can include (but may not be limited to) being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers). + +Instead prefer to append to `"parent"`, as the same result can be achieved without sacrificing accessibility like using `document.body`. + ### Basic ```js @@ -444,11 +448,7 @@ const SecondaryDropdown = () => { onFocus(); }} toggle={ - setIsOpen(next)} - toggleIndicator={CaretDownIcon} - id="toggle-id-plain-text" - > + setIsOpen(next)} toggleIndicator={CaretDownIcon} id="toggle-id-plain-text"> Dropdown } @@ -1489,53 +1489,89 @@ class ImageTextDropdown extends React.Component { } ``` -### Append menu document body +### Appending document body vs parent ```js import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; +import { Dropdown, DropdownToggle, DropdownItem, Flex } from '@patternfly/react-core'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; -class MenuOnDocumentBodyDropdown extends React.Component { +class DropdownDocumentBodyVsParent extends React.Component { constructor(props) { super(props); this.state = { - isOpen: false + isBodyOpen: false, + isParentOpen: false }; - this.onToggle = isOpen => { + this.onBodyToggle = isBodyOpen => { this.setState({ - isOpen + isBodyOpen }); }; - this.onSelect = event => { + this.onBodySelect = event => { this.setState({ - isOpen: !this.state.isOpen + isBodyOpen: !this.state.isBodyOpen }); - this.onFocus(); + this.onBodyFocus(); }; - this.onFocus = () => { - const element = document.getElementById('toggle-id-menu-document-body'); + this.onBodyFocus = () => { + const element = document.getElementById('toggle-id-document-body'); + element.focus(); + }; + + this.onParentToggle = isParentOpen => { + this.setState({ + isParentOpen + }); + }; + this.onParentSelect = event => { + this.setState({ + isParentOpen: !this.state.isParentOpen + }); + this.onParentFocus(); + }; + this.onParentFocus = () => { + const element = document.getElementById('toggle-id-parent'); element.focus(); }; } render() { - const { isOpen } = this.state; - const dropdownItems = [1]; + const { isBodyOpen, isParentOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled link + + ]; return ( -
+ - Dropdown + + Dropdown - Document Body } - isOpen={isOpen} + isOpen={isBodyOpen} dropdownItems={dropdownItems} menuAppendTo={() => document.body} /> -
+ + Dropdown - Parent + + } + isOpen={isParentOpen} + dropdownItems={dropdownItems} + menuAppendTo="parent" + /> + ); } } From c4d799b66c31e4f6676fe285af55b34f4a11cf8d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 23 Mar 2022 12:58:12 -0400 Subject: [PATCH 2/3] Update verbiage placement --- .../src/components/Dropdown/examples/Dropdown.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 7ea4e73c091..b9945afe035 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -18,10 +18,6 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg'; ## Examples -When passing in a value to the `menuAppendTo` prop on the Dropdown component, passing in `document.body` should be avoided if possible as doing so can cause accessibility issues. These issues can include (but may not be limited to) being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers). - -Instead prefer to append to `"parent"`, as the same result can be achieved without sacrificing accessibility like using `document.body`. - ### Basic ```js @@ -1491,6 +1487,12 @@ class ImageTextDropdown extends React.Component { ### Appending document body vs parent +When passing in a value to the `menuAppendTo` prop on the Dropdown component, passing in `document.body` should be avoided if possible as doing so can cause accessibility issues. These issues can include (but may not be limited to) being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers). + +Instead prefer to append to `"parent"`, as the same result can be achieved without sacrificing accessibility like using `document.body`. + +In this example, while both variants retain focus on their respective Dropdown component after making a selection, the `document.body` options cannot be navigated to via Voice Over. + ```js import React from 'react'; import { Dropdown, DropdownToggle, DropdownItem, Flex } from '@patternfly/react-core'; From cbc02055871c2912b3473251f70e4a099dd9dded Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 25 Mar 2022 14:41:28 -0400 Subject: [PATCH 3/3] Update verbiage to match Select component --- .../react-core/src/components/Dropdown/examples/Dropdown.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index b9945afe035..8b2dad2ed74 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -1487,11 +1487,11 @@ class ImageTextDropdown extends React.Component { ### Appending document body vs parent -When passing in a value to the `menuAppendTo` prop on the Dropdown component, passing in `document.body` should be avoided if possible as doing so can cause accessibility issues. These issues can include (but may not be limited to) being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers). +Avoid passing in `document.body` when passing a value to the `menuAppendTo` prop on the Dropdown component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers). -Instead prefer to append to `"parent"`, as the same result can be achieved without sacrificing accessibility like using `document.body`. +Instead append to `"parent"` to achieve the same result without sacrificing accessibility. -In this example, while both variants retain focus on their respective Dropdown component after making a selection, the `document.body` options cannot be navigated to via Voice Over. +In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the `document.body` variant cannot be navigated to via Voice Over. ```js import React from 'react';