Automattic / Automattic/jetpack

Slideshow block assigns role="group" to <li> slides, breaking list semantics

Open
#50,585 0 comments 0 reactions 1 assignee Claimed by @lynnbgriffith View on GitHub
[Block] Slideshow [Focus] Blocks Bug Needs triage
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

## Description

The Jetpack Slideshow block renders slides as `

  • ` elements inside a `
      `.

      After the slideshow initializes, Swiper adds `role="group"` to each slide. This overrides the native `listitem` semantics of the `

    • ` elements and causes accessibility tools such as axe and PageSpeed Insights to report:

      > Lists do not contain only `

    • ` elements and script-supporting elements (`` and `<template>`).

      ## Current behavior

      After initialization, the rendered markup includes slides similar to:

      ```html
      <ul class="wp-block-jetpack-slideshow_swiper-wrapper">
      <li class="wp-block-jetpack-slideshow_slide swiper-slide" role="group">
      <!-- Slide content -->
      </li>
      </ul>
      ```

      The resulting accessibility structure is interpreted as:

      ```text
      list
      └── group
      ```

      ## Expected behavior

      Slides rendered as `<li>` elements should preserve their `listitem` semantics:

      ```text
      list
      └── listitem
      ```

      ## Possible solution

      Swiper supports configuring the role assigned to each slide:

      ```js
      a11y: {
      slideRole: 'listitem',
      }
      ```

      A possible solution may be to set `a11y.slideRole` to `listitem` when initializing Slideshow blocks whose slides are rendered as `<li>` elements.

      WordPress VIP Support confirmed that Jetpack currently initializes Swiper without setting this option, so Swiper falls back to its default `group` role. They also confirmed that there is currently no supported PHP filter or JavaScript hook for overriding this configuration from application code.

      I’d be happy to prepare a pull request if this approach looks appropriate.

      ### Steps to reproduce

      1. Create a post or page.
      2. Add a Jetpack Slideshow block containing multiple images.
      3. Publish the page and open it on the frontend.
      4. Inspect one of the slideshow items after Swiper initializes.
      5. Observe that the `<li>` element has `role="group"`.
      6. Run an accessibility audit using axe or PageSpeed Insights.

      ### Site owner impact

      Fewer than 20% of the total website/platform users

      ### Severity

      Moderate

      ### What other impact(s) does this issue have?

      _No response_

      ### If a workaround is available, please outline it here.

      A temporary application-level workaround is available using custom JavaScript.

      The script waits for the Jetpack Slideshow Swiper instance to initialize, then:

      - sets `swiper.params.a11y.slideRole` to `"listitem"`;
      - updates `swiper.originalParams.a11y.slideRole` as well;
      - changes existing slide elements from `role="group"` to `role="listitem"`;
      - runs only when a Jetpack Slideshow block is present.

      This restores the expected list semantics for the `<li>` slide elements. However, it is only a compatibility workaround and the preferred fix would be to set the correct `slideRole` directly in Jetpack’s Swiper configuration.

      ### Platform (Simple and/or Atomic)

      Atomic

  • Contributor guide

    Open the contributing guide

    Assessment

    This issue has not been assessed yet.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.