-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: Option to disable Focus Restoration #629
Comments
Hello Bogdan! Thank you for opening an issue and my apologies for leaving it unanswered for so long. It’s quite a nifty case you have here. Have you tried using the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
We've run into an issue with the way we're using the A11yDialog and the feature of Focus Restoration as described in the documentation here: https://a11y-dialog.netlify.app/advanced/focus-considerations#focus-restoration
Our feature: we have a scrollable list of cards and each card opens an A11yDialog on click/enter press. The dialog does not cover the entirety of the page, but is a sibling of the list of cards I've just mentioned. The dialog has
position: sticky
as a css rule, keeping it in view while the list scrolls.Focus Restoration works as intended when the user navigates with the keyboard, as the focus is trapped inside the dialog, making it impossible for the user to further scroll the list of cards.
It is when the user clicks a card that problems start to arise: let's say we have many results in the list and we enter an overflow scenario. The user navigates with the mouse and clicks a card, thus opening a dialog. The user then proceeds to further scroll down the list and clicks another card. What happens then is that focus moves back to the previously focused element (the card that opened the dialog), thus making the user experience an unexpected jump in the cards list. Or, if the user closes the dialog and they have already moved away from the previously focused element while navigating with the mouse, the same jump occurs. It is especially visible if smooth scrolling is applied to the whole document.
The solution we came up with: if the user opens a dialog with click (uses mouse navigation), we set
_previouslyFocused
tonull
on the current instance after theshow()
event has been triggered. We also locked our version at 7.5.2 to make sure no changes interfere with the current behaviour.The request: It would be helpful and less hack-ish for us if A11yDialog would have a way to disable Focus Restoration.
Thank you for your time, attention and this useful component!
The text was updated successfully, but these errors were encountered: