Carousel

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-carousel label="Studio tour">
  <figure class="tui-carousel__slide" aria-label="Solar today">
    <div class="tui-carousel__picture">…</div>
    <figcaption class="tui-carousel__caption"><b>Solar today</b><span>Peaked at 5.4 kW at 13:00.</span></figcaption>
  </figure>
  <figure class="tui-carousel__slide" aria-label="Next session">…</figure>
  <figure class="tui-carousel__slide" aria-label="Levels">…</figure>
</tui-carousel>

<!-- Rotation only when asked: a stop key comes first, reduced motion keeps it still. -->
<tui-carousel label="Quotes" autoplay="6000">…</tui-carousel>

import '/kit/kit.mjs';   // defines <tui-carousel>

const tour = document.querySelector('tui-carousel');
tour.addEventListener('change', () => track('slide', tour.index));
tour.go(2);   // bring the third slide into the gate

Needs kit.css and kit.mjs. How to install the kit.

• The WAI-ARIA carousel pattern: a named region with aria-roledescription="carousel"; each slide a group with aria-roledescription="slide" and a label like “2 of 4: Next session”.
• Slides out of the gate are inert, so Tab never lands on something you cannot see.
• The gate is a polite live region while nothing rotates, so a change of slide is read out; during rotation it is silent, and focus or hover holds it.
• Keys have names (“Next slide”, “Slide 3: Levels”); the lit lamp is also aria-current.
• Rotation never starts under prefers-reduced-motion, and the stop key is the first control, as the pattern asks.

A custom element that moves its slides into a track and builds the gate and the bar around them. The track is a native horizontal scroller with scroll-snap-type: x mandatory and scroll-snap-stop: always, so a swipe, a trackpad and scrollTo all land on whole slides with no gesture code; the counter follows the scroll position as a slide passes halfway, and scrollend settles which slides are inert. Under reduced motion the keys jump instead of gliding. The gate is the kit’s recess, 6px deep, with an inner shadow where its upper wall shades each slide.