fix(FocusLock): Stop stealing focus when embedded

[muscat1]

No description provided.

[muscat1]

Hey, @skolmer could you PTAL at this too? I'm undoing a change (see screenshot) that was part of your Atlaskit overhaul a while back as it ended up not working as expected, namely focus is still being stolen when the conference is embedded and dialogs are rendered. I'm not sure if this messes something else up, so please let me know. I also didn't find the crossFrame prop documented in the focus-lock docs...

[skolmer]

Hi @muscat1, I might have missed an edgecase here.

The expected behavior is: If modal dialogs are shown the focus should move to the dialog. Locking focus to dialogs is a requirement to achieve WCAG 2 compliance.

Can you give an example where this causes issues? It should only be active for modal dialogs that are opened by a user action not for alerts or other stuff that are triggered without user input. So when it triggers the user focus should already be inside of jitsi and not the outer frame.

You are right it is not well documented. You can read about it in this PR theKashey/react-focus-lock#104
theKashey/react-focus-lock@486a7e0#diff-5bcff6869f846f5d731ec69050b8aa8ec92acd9d592a64b89504dda7f63dbd96R29

[skolmer]

To ensure that focus-lock is only active when the jtsi frame has focus we could use https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus to check if the document has focus and otherwise disable focus-lock.

[muscat1]

Thanks for the quick reply @skolmer. I drew up a quick example here: https://jsbin.com/lizoguqiru/edit?html,output
The input below can't be focused when a modal is open in the iframe. Yeah, maybe we need to look into identifying whether the frame is in focus or not in order to decide whether we enable this or not.

[muscat1]

Also, thanks for pointing out the actual feature. From what it states, it should be enough for our use case, but by running a quick npm ls, Atlaskit seems to be using an outdated version of the library, so that feature is missing entirely.

[skolmer]

Also, thanks for pointing out the actual feature. From what it states, it should be enough for our use case, but by running a quick npm ls, Atlaskit seems to be using an outdated version of the library, so that feature is missing entirely.

oh, that might explain it. I added the newest version to the package.json but can't find it in the current master nor in the PR we provided. It might have got lost on the way, sorry for that 🤦‍♂️

[muscat1]

Seems to have done the trick, thanks for taking the time to look into it! I had to convert the wrapper to a function component (which I like, anyway) since react-focus-lock no longer exports class components. Maybe @saghul or @hristoterezov can take a look as well, since they've been around that block.