Jetpack: Slideshow Block: Page Down navigation focus stuck in endless loop

[mrfoxtalbot]

When navigating a post using he

Steps to reproduce the issue

1. Create a new post, add a slideshow and add several images.
2. Publish the post and visit it.
3. Use the Page Down keys to navigate the post.
4. When you get to the slideshow, the focus will be stuck in the carousel, which is a loop, preventing the user from continuing with the navigation.

What I expected

I expected to be able to continue navigating the posts using the Page Down key.

What happened instead

I was stuck in a infinite loop inside the Slideshow block.

Screenshots
Here is the site where this was reproduced:
https://mrfoxtestingsite.wordpress.com/2020/02/04/slideshow-block-stealing-the-focus-of-your-page-down-navigation/
Here is a screencast:
https://d.pr/v/hLXnJM

2689783-zen

[scottsweb]

This is an upstream issue with Swiper, the gallery that has been implemented for this block. It is bundled as part of the "keyboard" navigation feature of that library. Code here:

https://github.com/nolimits4web/swiper/blob/8d0dd34f87a48a497389f2cc8ed9503c0ba351b3/src/components/keyboard/keyboard.js#L53

I think we should look to open an issue upstream, but I would like to know a bit more about what the use case is for the "page up" and "page down" buttons in terms of accessibility. There are many keyboard shortcuts for navigating a page, what does 'normal' look like here?

[mrfoxtalbot]

Thank you for looking into this.

There are many keyboard shortcuts for navigating a page, what does 'normal' look like here?

Basically, once the focus is on the slideshow block, there is no way to continue advancing. I am not sure there is any practical way to solve this, thought, as we would need to make the slideshow block to NOT loop when navigated via keyboard.

[scottsweb]

In general when I am testing sites for keyboard navigation, I rely on tab, space and enter to get around. I am guessing page up and page down are just used as quick shortcuts to the footer/header.

I will open an issue on the swiper project and see if they have any suggestions.

[scottsweb]

The Swiper project has provided us with a setting to turn this off:

https://github.com/nolimits4web/swiper/commit/47c2a7a7cf1a22134b3f88ac50dd54e9acbfe850

swiper.params.keyboard.pageUpDown - we should be able to implement this and update the Swiper library.

[AtrumGeost]

I'm not sure if this is related. If not, let me know and I can create a new GH issue.

1. Add a slideshow block with images that have an alt text and enable autoplay in the block settings
2. Visit the published page with a VoiceOver (macOS screen reader)

You'll notice that the focus goes to the slideshow alternative text somehow. You can see that happening in the following video. I haven't started navigating the content but the screen reader automatically focuses on the slideshow and reads each alternative text:

https://cloudup.com/cG03s-MMhh6

[scottsweb]

@AtrumGeost I think that might be best served by a new GH issue, if you could create a new one and ping me in it, I will see if I can investigate further. It sounds like the main issue there is focus automatically going to the slideshow.

It would be useful in the new issue if you provided the keyboard presses you used to test. Thanks.

[AtrumGeost]

Hey @scottsweb! Thanks for checking this. I created the new GH issue: https://github.com/Automattic/jetpack/issues/16419