chore(Select): update examples to show different appends #7087
Conversation
thatblindgeye
requested review from
wise-king-sullyman,
nicolethoen,
jessiehuff and
tlabaj
|
Preview: https://patternfly-react-pr-7087.surge.sh A11y report: https://patternfly-react-pr-7087-a11y.surge.sh |
thatblindgeye
force-pushed
the
select_doc_body
branch
from
3729556 to
0d1b7ed
Compare
|
I like this approach, too, @nicolethoen . In the future we may want to consider how we order these examples as this feels stuck in the middle of the page. But that's a larger discussion about making this component documentation more readable/usable, I think. |
| ### Select menu document body | ||
| ### Appending document body vs parent | ||
|
|
||
| When passing in a value to the `menuAppendTo` prop on the Select 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 Select options via assistive technologies (like keyboards or screen readers). |
There was a problem hiding this comment.
Maybe someone for content can take a quick look at this.
There was a problem hiding this comment.
Allison took a look and suggested the following
"Avoid passing in document.body when passing a value to the menuAppendTo prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).
Instead append to "parent" to achieve the same result without sacrificing accessibility.
In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.
For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the "parent" variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case)."
| ### Select menu document body | ||
| ### Appending document body vs parent | ||
|
|
||
| When passing in a value to the `menuAppendTo` prop on the Select 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 Select options via assistive technologies (like keyboards or screen readers). |
There was a problem hiding this comment.
Allison took a look and suggested the following
"Avoid passing in document.body when passing a value to the menuAppendTo prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).
Instead append to "parent" to achieve the same result without sacrificing accessibility.
In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.
For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the "parent" variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case)."
thatblindgeye
force-pushed
the
select_doc_body
branch
from
0d1b7ed to
8ece963
Compare
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
What: Closes #6150
While this PR does not actually fix the issue of the Select component appended to
document.bodynot working with screen readers, I think the best option instead is utilizing the"parent"value formenuAppendToprops across components (if we're able). While it isn't as evident in the updated example (Appending document body vs parent), I think the results are better seen in the below codesandbox link in which I utilized Modals (as I believe this was one of the major reasons for utilizingdocument.body).I also added some instructions/warnings about appending the Select component to the
document.body, to help make it clearer why it should be avoided and showing the alternative.Codesandbox: Select inside Modal
Additional issues: