Automattic / Automattic/jetpack
Slideshow block assigns role="group" to <li> slides, breaking list semantics
- 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 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
After the slideshow initializes, Swiper adds `role="group"` to each slide. This overrides the native `listitem` semantics of the `
Contributor guide
Assessment
This issue has not been assessed yet.