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

[olehkosarenko]

Impacted plugin

Jetpack

Quick summary

Description

The Jetpack Slideshow block renders slides as <li> elements inside a <ul>.

After the slideshow initializes, Swiper adds role="group" to each slide. This overrides the native listitem semantics of the <li> elements and causes accessibility tools such as axe and PageSpeed Insights to report:

Lists do not contain only <li> elements and script-supporting elements (<script> and <template>).

Current behavior

After initialization, the rendered markup includes slides similar to:

<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:

list
└── group

Expected behavior

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

list
└── listitem

Possible solution

Swiper supports configuring the role assigned to each slide:

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