Comments (8)
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.
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.
Related Issues (20)
- Fancybox.getInstance is incorrectly typed, missing string option HOT 2
- Download button is disabled for videos HOT 2
- Aspect Ratio via data-attribute HOT 1
- Unable to click on a link positioned over a Fancybox/Carousel HOT 1
- Carousel error when trying to control slides using useState in React HOT 1
- Fancybox: Hide caption when idle? HOT 1
- iframe performance issue HOT 2
- Slideshows aren't waiting for videos anymore HOT 2
- Zoom doesn't work when image is max size HOT 1
- Carousel position resetting when toggling visibility (display none) HOT 2
- Vertical thumbnails? HOT 1
- SASS Deprecation Warning HOT 2
- Performance Issues and loosing state on Mobile HOT 7
- "Nested" Fancybox instance ignores "inline" type, using "clone" instead. HOT 1
- Carousel bug: data-lazy-srcset incorrectly assigned to src instead of srcset
- Carousel thumbs bug: Thumb src doesn't work on addSlide, prependSlide and appendSlide HOT 2
- Deceleration re-implementation? HOT 2
- Fade-in animation jump when backdrop opacity != 1 HOT 2
- use fancybox to open a just-created dom HOT 1
- 图片预览的时候,能不能不要在url添加hash
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.