-
Notifications
You must be signed in to change notification settings - Fork 14
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
Q: Combined lock targets OR prevent focus from element #2
Comments
This is not supported right now, but in the future it will be possible to create a "focus-lock-group" and being able to tab from one "lock" to "another". |
That is awesome! Exactly what I'm looking for 😄 Anyway I can help out? Lemme know! |
Yep, you could. Few things have to be ported from react version:
Literally it just a copy-paste-n-test, but I've never we able to do it :( PS: Lets keep this issue open. |
I will see what I can do (tomorrow)! I have some experience in both React and Vue, so I should be able to match the two. Is there anything in the React version that you rather have merged into the "core" focus-lock?
(Wrong button 😅) |
might be the The main problem here is to provide that array, not to handle it. For react implementation I am just going to use singletone(ok, global) variable to store all the Traps, merged together by How would you do this in Vue? |
I have been thinking about, and to me it doesn't sound like that bad of a solution actually! I think both the Vue and React plugins could rely on the Dom: <div class="focus-lock" data-group="group"></div> Vue: <focus-lock :group="group" /> React:
The Vue/React plugins would render the same This way, the Thoughts on this? |
yeah, it could be the most transparent solution, and then it will be possible to combine vue+react+dom solutions on one page. Still a case sometimes. |
Let me inject the necessary patches into |
Awesome! |
Scattered focus support just landed on react-focus-lock.
|
Heya! Thanks for your awesome work ❤️
I was wondering on your thoughts on the following:
I have a "basic" webpage layout like like follows:
On small screens, the aside gets hidden to the side and the header contains a button to toggle it on and off. When the aside is active, the main content get's grayed out and overlayed with the aside.
I was wondering if it's possible using (the current version of) this plugin to lock the focus in both the header and aside, seeing the header stays in view and contains the on-off toggle for the aside.
(An alternative for me that would work too in this example would be locking the focus out of an element, so the element and it's children get "skipped" when tabbing.)
The text was updated successfully, but these errors were encountered: