Keyboard navigation is not working properly

[gyurmey2]

Describe the bug

Hi, I noticed two problems.

1. The tab stop is not working properly. After going to the thumbnails, it only comes to specific a point and then goes back to the toolbar.
2. The second problem is smaller and is that the first time you click on Toggle thumnails, the thumbnails disappear immediately (there is no smooth transition).

Taking this opportunity, I would like to ask if there is any way to reduce the motion using the Prefers Reduced Motion? Like with Parvus.js?

Thanks!

Reproduction

https://jsfiddle.net/2xn4crd5/8/

Additional context

No response

[fancyapps]

Hi,

I can not reproduce your issue with the thumbnails. What browser are you using? If you wish, you can check if user "Prefers Reduced Motion" and then disable zoom animation, etc.

[gyurmey2]

I can not reproduce your issue with the thumbnails. What browser are you using?

I can't reproduce the problem now either, so I suppose the problem was on my end.

If you wish, you can check if user "Prefers Reduced Motion" and then disable zoom animation, etc.

Thanks! I tried to do it in CSS but without success. Do you mean JS?

[fancyapps]

Yes, something like this:

const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;

Fancybox.bind('[data-fancybox="gallery"]', {
  Images : {
    zoom: !isReduced
  }
});

[gyurmey2]

Thank you, but I don't really know how to reduce the motion in the example below.

Carousel: {
    transition: 'slide', // With no preference motion
    transition: 'false', // With reduce motion preference
}

[fancyapps]

Almost any option accepts a function, so, just return a function that returns boolean value, e.g., transition : () => { return false; }