twbs / bootstrap / 27362898066

94%

main: 96%

Build Type

push

github

Committed by web-flow

Commit Message

Carousel: scroll-snap rebuild, opt-in autoplay, play/pause, and UI redesign (#42484)

* Make carousel autoplay opt-in via boolean `autoplay` option

Replace the `ride` option with a boolean `autoplay` option (default
`false`), so carousels are static by default and only autoplay when
explicitly opted in with `data-bs-autoplay="true"`.

This removes the confusing `ride="true"` behavior that started
autoplaying only after the first user interaction, and the cryptic
`ride="carousel"` string value. Addresses the first two points of #32649.

* Stop carousel autoplay on interaction and add play/pause control

Address the WCAG 2.2.2 (Pause, Stop, Hide) concern in #32649.

Behavior: once a user takes control of an autoplaying carousel — clicking
a control or indicator, using the keyboard, or swiping — autoplay stops
for good instead of resuming, respecting their intent. A new runtime
`_playing` flag tracks autoplay intent and gates `_maybeEnableCycle()`.

Control: add a `.carousel-control-play-pause` button as the discoverable
pause/stop mechanism WCAG actually requires (a hover-only pause does not
qualify). It toggles autoplay, reflects state by swapping its icon (via
pause-fill/play-fill CSS mask icons) and `aria-label`, and can also start
autoplay on an otherwise static carousel.

Includes unit tests, SCSS tokens/styles with dark-mode support, docs, and
a migration note.

* Rebuild carousel on CSS scroll snap

Replace the float/translateX engine and custom swipe handler with a native
horizontal scroll-snap container. Sliding, touch dragging, momentum, and
keyboard scrolling now come from the browser; JavaScript only layers on
autoplay, the prev/next/indicator controls, and active-slide syncing via an
IntersectionObserver.

This unlocks features the old engine couldn't do, all via CSS custom
properties on `.carousel`:

- Multiple slides per view (`--carousel-items`) with responsive
  `.carousel-items-*` utilities
- Peek of adjacent slides (`--carousel-peek`... (continued)

Coverage Stats

1018 of 1133 branches covered (89.85%)

Branch coverage included in aggregate %.

285 of 290 new or added lines in 1 file covered. (98.28%)

3 existing lines in 1 file now uncovered.

2875 of 2992 relevant lines covered (96.09%)

238.39 hits per line