[Slideshow] Autorotating slideshow may be difficult to bypass

[svinkle]

Issue summary

When the slideshow is set to autorotate, screen reader users may have difficulty bypassing the slideshow content.

When the screen reader virtual cursor is on a slide and the slide moves to reveal the next slide, the virtual cursor focus position moves and is placed in an unexpected spot, such as the top of the slideshow or in the middle of the next slide. If the user is not fast enough to navigate through, this would create difficulty in bypassing the slideshow content, potentially creating a "keyboard trap."

Video demo

screen-20220113-125511.mp4

Steps to reproduce

1. Go to a Dawn theme store with any supported browser
2. Set a slideshow section as autorotate
3. With an active screen reader, use the virtual cursor to navigate through the slide content

Behavior

Expected

• Slideshow to be paused when focus is placed within the slideshow container.

Actual

• Slideshow continues to rotate.

Recommendation

Since we can't detect when a screen reader is in use or where its virtual cursor is positioned in the DOM, we're unable to pause the slideshow when someone is navigating through it (as apposed to the browser cursor which we can detect via document.activeElement.)

The next best solution is to place the slideshow controls (next, prev, pause, etc) at the top of the slideshow container. With this, the user will be able to pause the slideshow before entering the rotating content. This will allow the user to move through the slideshow with ease.

In order to not disrupt the indented design, use CSS to re-position the control container at the bottom of the slideshow container. Scoping this change to only when autorotate is enabled will help to avoid focus order issues for when autorotate is disabled.

Recommended code

HTML

<slideshow-component
  class="slider-mobile-gutter mobile-text-below"
  role="region"
  aria-roledescription="Carousel"
  aria-label="Updates to our collections"
>
  {{ if slideshow.autorotate = true }}
  <div class="slideshow__controls slider-buttons no-js-hidden">
    <!-- Controls… -->
  </div>
  {{ endif }}
  <div
    class="slideshow banner banner--large grid grid--1-col slider slider--everywhere banner--mobile-bottom"
    id="Slider-template--15357482565803__1641933436b37a671f"
    aria-live="off"
    aria-atomic="true"
    data-autoplay="true"
    data-speed="5"
  >
    <!-- Slides… -->
  </div>
  {{ if slideshow.autorotate = false }}
  <div class="slideshow__controls slider-buttons no-js-hidden">
    <!-- Controls… -->
  </div>
  {{ endif }}
</slideshow-component>

Specifications

• Browser: Any
• Dawn version: 2.5.0
• Component: Slideshow
• WCAG Principal: Operable
• WCAG SC: 2.4.3 Focus Order
• Severity: High
• Effort: Medium