Slideshow: Update mobile styles

[thomasguillot]

Optimise the mobile styles of the Slideshow Block and make sure we don't display unnecessary elements (prev/next arrow) on small screens.

Changes proposed in this Pull Request:

• Only display prev/next arrows when viewport is >= 600px
• Make sure captions fit properly within the slide and don't overflow the play/pause button.
• Make sure slides on focus (touch slide) don't display an outline

Testing instructions:

• Create a post with a Slideshow block
• Add a few images with a very very long caption
• How does the block look like?
• Enable autoplay
• How does the block look like?
• Resize your screen (or check the side on mobile), do you see the arrows?
• On on your desktop, do you see the arrows?

Before:

After:

Proposed changelog entry for your changes:

• Slideshow Block: Depending on viewport, display prev/next arrows
• Slideshow Block: Remove outline when focussing on the block

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello thomasguillot! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D27615-code before merging this PR. Thank you!

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: May 7, 2019.
Scheduled code freeze: April 30, 2019

Generated by 🚫 dangerJS against c7b0f22

[matticbot]

thomasguillot, Your synced wpcom patch D27615-code has been updated.

[simison]

Works well, tested with mobile and Firefox on desktop. Tested with and without "autoplay" on.

Does this cause any accessibility issues potentially now that next/prev are hidden on small screens? Suppose folks using keyboard to navigate are on bigger screens anyway?

[jeherve]

This works well for me. 👍

[scruffian]

@davidakennedy for the accessibility question...

[jeffersonrabb]

Does this cause any accessibility issues potentially now that next/prev are hidden on small screens?

On mobile, swiping would be the natural form of interaction anyway. The arrows are primarily meant as shortcut for environments where pointing devices are the norm—even though you can swipe with the mouse it's unusual behavior. Because of this, I don't think this qualifies as an accessibility concern, but @davidakennedy will have a more sophisticated POV.

[kraftbj]

Holding pending the question. Marking as "needs review" for now.

[davidakennedy]

Does this cause any accessibility issues potentially now that next/prev are hidden on small screens?

I think these changes are okay. From an accessibility perspective, they still have the pagination buttons there to help them navigate around. Although, I like the arrow buttons better because they have a larger hit target.

Some customers may have no vision or low vision, so seeing what's there (to be able to swipe it) could be a problem. So screen reader users need some controls to let them know what's there, and to navigate.

This does bring up a larger issue, we're assuming all screen sixes less than 600px are touch screen. Is that a safe assumption? I think probably – I'm just raising it.