Carousel - autoplay a11y requirements

[Powerplex]

🚀 Feature request

Carousel in autoplay in itself is not the most accessible component, but there are guidelines/recommendations about how to keep it accessible, from w3.org

If the carousel can automatically rotate, it also:

• Has a button for stopping and restarting rotation. This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse.
• Stops rotating when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
• Stops rotating whenever the mouse is hovering over the carousel.

I personally will disable autoplay entirely because I don't like autoplay on anything period, but I was thinking it could be interesting to consider this :)

🧱 Problem Statement / Justification

a11y compliance: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#qr-time-limits-pause

✅ Proposed solution or API

1 - First PR could stop the autoplay on hover + keyboard focus

2 - second PR to consider the stop/play button in the anatomy (could be a separate issue)

[segunadebayo]

Interesting points.

First, Zag.js already provides a way to play/pause the autoplay by spreading the api.getAutoplayTriggerProps() on a button component. So that's sorted.

The other requirement, such as pausing on hover/focus, could be handled in a PR if you want to work on that. We already provide an api.pause method you can use for this.