[a11y] Popover accessibility docs #1408
Conversation
|
@sadiesaurus Let me know if you have a chance to look at this! Popover came up today on a question from the inventory team, so I'd love to get this in our next release. |
|
|
||
| ### Keyboard support | ||
|
|
||
| - When a popover opens, focus moves to the popover container |
There was a problem hiding this comment.
Should we mention the preventAutoFocus prop at all? I'm thinking there's opportunity here to make it clear when it's okay to use, like when autoFocus would prevent merchants from completing the action that triggers the popover. For example, when a text field listening for certain characters is the activator and autofocusing focusable items inside the activated popover would remove focus from the text field while typing; additional focus management needs to be implemented in this case.
(Click to view gif of example case described above)
There was a problem hiding this comment.
This came up in discussion about popovers today too, actually. Based on that and other questions about keyboard accessibility, I think I want to chunk out a separate page (probably under patterns and guides?) about keyboard interactions in general. Would love your thoughts on doing it that way, @chloe!
There was a problem hiding this comment.
I think that's a great idea, as it comes up in a lot of our components 👍
Co-Authored-By: dpersing <devon.persing@shopify.com>
WHY are these changes introduced?
Adds accessibility guidance for the popover component, to appear in
polaris-reactdocs and in the style guide.See the draft Google doc for editing history for these changes and updates for other components and pages.
WHAT is this pull request doing?
UNRELEASED.mdHow to 🎩
masterfrompolaris-styleguidepolaris-reactand run the instructions for testing in a consuming project.polaris-styleguidetab, rundev up && dev start.Screenshots
Web
Android
iOS