Carousel

function CarouselPattern() {
  const [index, setIndex] = useState(0);
  const [playing, setPlaying] = useState(false); // off by default
  const [announcement, setAnnouncement] = useState("");

  function goTo(next, userInitiated) {
    const wrapped = (next + SLIDES.length) % SLIDES.length;
    setIndex(wrapped);
    if (userInitiated) {
      // Never announce pure autoplay ticks — only user-driven changes.
      setAnnouncement(`Slide ${wrapped + 1} of ${SLIDES.length}: ${SLIDES[wrapped].title}`);
    }
  }

  useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setIndex(i => (i + 1) % SLIDES.length), 5000);
    return () => clearInterval(id);
  }, [playing]);

  return (
    <div role="region" aria-roledescription="carousel" aria-label="Product announcements"
         onKeyDown={e => {
           if (e.key === "ArrowRight") goTo(index + 1, true);
           if (e.key === "ArrowLeft") goTo(index - 1, true);
         }}>
      <div aria-roledescription="slide" aria-label={`${index + 1} of ${SLIDES.length}`}>
        {SLIDES[index].title}
      </div>
      <div aria-live="polite" aria-atomic="true" className="sr-only">{announcement}</div>
      <button onClick={() => goTo(index - 1, true)} aria-label="Previous slide">‹</button>
      <button onClick={() => goTo(index + 1, true)} aria-label="Next slide">›</button>
      <button onClick={() => setPlaying(p => !p)} aria-pressed={playing}>
        {playing ? "Pause" : "Play"}
      </button>
    </div>
  );
}