Q: Combined lock targets OR prevent focus from element

Question

Q: Combined lock targets OR prevent focus from element

rijkvanzanten opened this issue 6 years ago · comments

Heya! Thanks for your awesome work ❤️

I was wondering on your thoughts on the following:

I have a "basic" webpage layout like like follows:

-------------------------------
| header                      |
-------------------------------
| main              |  aside  |
|                   |         | 
|                   |         |
|                   |         |
|                   |         |

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.)

Rijk van Zanten commented 6 years ago

Awesome!

Anton Korzunov · Answer 1 · Wed Mar 14 2018 06:44:32 GMT+0800 (China Standard Time)

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".
ETA 1-2 weeks

Rijk van Zanten · Answer 2 · Wed Mar 14 2018 06:45:28 GMT+0800 (China Standard Time)

That is awesome! Exactly what I'm looking for 😄

Anyway I can help out? Lemme know!

Anton Korzunov · Answer 3 · Wed Mar 14 2018 07:03:20 GMT+0800 (China Standard Time)

Yep, you could.
I am not good at Vue, and as the time passes react-focus-lock continues to evolve, as long vue-focus-lock - not, even if 90% of everything is in framework independent focus-lock.

Few things have to be ported from react version:

better focus guards - just two divs before, and after the lock (https://github.com/theKashey/react-focus-lock/blob/master/src/Lock.js#L78)
more complex activateTrap function, with support with better autofocus and persistentFocus prosp. (https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L11). Probably all the "js" code should be the same between vue and react versions.

Literally it just a copy-paste-n-test, but I've never we able to do it :(

PS: Lets keep this issue open.

Rijk van Zanten · Answer 4 · Wed Mar 14 2018 07:05:57 GMT+0800 (China Standard Time)

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?

PS: Lets keep this issue open.

(Wrong button 😅)

Anton Korzunov · Answer 5 · Wed Mar 14 2018 07:21:35 GMT+0800 (China Standard Time)

Is there anything in the React version that you rather have merged into the "core" focus-lock?.

might be the activateTrap function, which combines together all the pieces. It is also the right place to implement the feature you are asking for - observed has to be converted into array of traps, and next underlying logic could do it's job properly.

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 groupName (active traps only, using a global is ok, it is better than `document.querySelectorAll('[lockGroup=name]').

How would you do this in Vue?

Rijk van Zanten · Answer 6 · Thu Mar 15 2018 00:04:20 GMT+0800 (China Standard Time)

it is better than `document.querySelectorAll('[lockGroup=name]').

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-focus-lock repo, with the React and Vue plugins only providing a little bit syntactic sugar:

Dom:

<div class="focus-lock" data-group="group"></div>

Vue:

<focus-lock :group="group" />

React:

<FocusLock group="group" />

The Vue/React plugins would render the same divs, meaning the base JS can do it's work the same way across implementations.

This way, the dom package can get the array by document.querySelectorAll('.focus-lock[group]')

Thoughts on this?

Anton Korzunov · Answer 7 · Thu Mar 15 2018 05:28:55 GMT+0800 (China Standard Time)

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.

Anton Korzunov · Answer 8 · Thu Mar 15 2018 05:41:56 GMT+0800 (China Standard Time)

Let me inject the necessary patches into focus-lock, then you will only have to land some attributes on vue-focus-lock.

Anton Korzunov · Answer 9 · Thu Mar 15 2018 11:42:24 GMT+0800 (China Standard Time)

Scattered focus support just landed on react-focus-lock.
The steps to make it work for vue:

Get focus-lock 0.2.0
Set the attribute on trap

import {constants} from 'focus-lock';
//and add an attribute on observed node
[constants.FOCUS_GROUP]: group

Enjoy.

activateTrap were left out of focus-lock as long it includes code, relative to React implementation - portals.