Ensure FocusScope adheres to the Dialog WAI-ARIA design pattern #2307
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Per the documentation for the popover component, the popover component adheres to the Dialog WAI-ARIA design pattern: https://reka-ui.com/docs/components/popover#accessibility However, when testing, if the popover contains a list of links and then a button, the focus will go to the button, not the link. From my understanding of the design pattern, this isn't correct as links are focusable elements too. I'm not sure why it was originally like this - the PR that added the code doesn't give any details: unovue#281 (the pattern can be found here: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
Collaborator
Author
|
Hadn't seen that, thanks! Seems pretty good logic for dialogs where forms are more common, but not sure it works for popovers - we're seeing a lot of inconsistencies throughout our app as we're using them for nested navigation / action dropdowns / export menus / other things where we mix buttons and links but they all look the same Either way, clearly this PR needs to change as it's breaking sensible behaviour for dialogs - would you accept a prop as in radix-ui/primitives#1796 if i made the same change here? |
Collaborator
Hi, thanks for the PR btw It's up to maintainer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Per the documentation for the popover component, the popover component adheres to the Dialog WAI-ARIA design pattern: https://reka-ui.com/docs/components/popover#accessibility
However, when testing, if the popover contains a list of links and then a button, the focus will go to the button, not the link. From my understanding of the design pattern, this isn't correct as links are focusable elements too.
I'm not sure why it was originally like this - the PR that added the code doesn't give any details and there's no comments on the function or usages: #281
(the pattern can be found here: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
This is my first contribution to this project - you don't have a CONTRIBUTING.md so let me know if I've done anything wrong! I'm just joined your discord too if that's quicker than communicating here :)