Skip to content

Commit

Permalink
Update verbiage placement
Browse files Browse the repository at this point in the history
  • Loading branch information
thatblindgeye committed Mar 25, 2022
1 parent a9c5c3f commit c4d799b
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions packages/react-core/src/components/Dropdown/examples/Dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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';
Expand Down

0 comments on commit c4d799b

Please sign in to comment.