Iframe Keyboard Navigation about ui HOT 8 CLOSED

I could not reproduce this issue in the basic example, but I could observe it in that particular demo.

Sorry, I think I can not fix it, because the browser decides where place the focus and, if it happens to be in the iframe, focus event does not bubble up and it is not possible to catch it. The only solution would be to disable preloading.

from ui.

Hi,

Sorry, I do not see any issue. Did you try focusing on the page that is not inside iframe (any playground is inside iframe and that may affect the flow depending whether pages are same origin)?

from ui.

I have already tried to implement it in our application for testing purposes (with no wrapping iframe), and there it has also the same behaviour.

For example if you take the playground example with only these two videos:

  <a
    class="hidden"
    data-fancybox="gallery"
    href="https://www.youtube.com/watch?v=5AwdkGKmZ0I"
  ></a>

  <a
    class="hidden"
    data-fancybox="gallery"
    href="https://www.youtube.com/watch?v=HmZKgaHa3Fg"
  ></a>   

And you then press Tab on the last focusable element of the first player (fullscreen button) followed up with Enter it opens the channel of the second video - at least for me.

Thanks

from ui.

If I press Tab multiple times to place focus on fullscreen button and then press Enter, fullscreen is activated. Therefore, sorry, I simply do not understand your issue. Everything works perfectly fine, focus is trapped inside current slide and controls.

Maybe simply disable preloading? For example: Fancybox.defaults.preload = 0;

from ui.

No, my problem lies not with the fullscreen feature itself. It is the button that is focused after the fullscreen button which in my opinion should either be the "Previous", "Next" or "Close" Button again.

But instead the Iframe from the next slide is focused, although it is not visible to the user. I was trying to say that if I perform a Tab while being on the Fullscreen button, I end up in the next Iframe and upon pressing Enter afterwards, the channel of the next video is opened.

Sorry if I am being hard to understand, i am trying my best to be as clear as i can. Thank you for being patient and investing your time in this.

from ui.

I hope these two pictures help to illustrate my problem. In Picture 1 the Fullscreen Button in iframe_1_4 is currently focused. Picture 2 shows the state, after i press the Tab button. The focus now lies in iframe_1_5 on the first focusable element (The Channel Selection probably). If I press Enter now, the channel is opened in a new Tab.

Picture 1

Picture 2

from ui.

Maybe in addition to this, in Firefox it seems like i cannot even get the focus inside an Iframe. In the demo i referenced earlier (https://fancyapps.com/playground/vk) for example, when you are on the slide with the Videoplayer, the focus gets stuck on the "Close"-Button after pressing Tab for a couple of times. You can get back with Shift-Tab to the "Next"-Button, but once again there is no getting past the IFrame.

I can confirm this is also happening in our application with Firefox Version 91.0.2 (64-Bit).

from ui.

Sorry to disappoint you, but there is little I can do about focus management.

from ui.