Accessible Carousel

import React, { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react";
import "./AccessibleCarousel.css";

/**
 * AccessibleCarousel
 *
 * Props
 *   slides:        [{ id, title, body, cta? }]
 *   label:         carousel's accessible name (required)
 *   autoplay:      true/false (default false — opt-in)
 *   intervalMs:    default 5000
 */
export default function AccessibleCarousel({
  slides, label,
  autoplay = false,
  intervalMs = 5000,
}) {
  const n = slides.length;
  const [i, setI] = useState(0);
  const [playing, setPlaying] = useState(autoplay);
  const [announce, setAnnounce] = useState("");
  const timerRef = useRef(null);
  const carouselRef = useRef(null);

  // Respect prefers-reduced-motion — never auto-start
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (mq.matches) setPlaying(false);
  }, []);

  // Autoplay timer
  useEffect(() => {
    if (!playing) return;
    timerRef.current = setInterval(() => {
      setI((cur) => (cur + 1) % n);
    }, intervalMs);
    return () => clearInterval(timerRef.current);
  }, [playing, intervalMs, n]);

  function go(step) {
    const next = (i + step + n) % n;
    setI(next);
    setAnnounce("");
    setTimeout(() => {
      setAnnounce(`Slide ${next + 1} of ${n}: ${slides[next].title}`);
    }, 30);
  }

  function pauseIfPlaying() { clearInterval(timerRef.current); }
  function resumeIfPlaying() {
    if (!playing) return;
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setI((c) => (c + 1) % n), intervalMs);
  }

  return (
    <>
      <section
        ref={carouselRef}
        role="region"
        aria-roledescription="carousel"
        aria-label={label}
        className="carousel"
        onMouseEnter={pauseIfPlaying}
        onMouseLeave={resumeIfPlaying}
        onFocus={pauseIfPlaying}
        onBlur={(e) => {
          if (!carouselRef.current?.contains(e.relatedTarget)) resumeIfPlaying();
        }}
      >
        {autoplay && (
          <button
            type="button"
            className="carousel__pause"
            aria-label={playing ? "Stop automatic slide show" : "Start automatic slide show"}
            aria-pressed={playing}
            onClick={() => setPlaying((p) => !p)}
          >
            {playing ? <Pause aria-hidden="true" size={14} /> : <Play aria-hidden="true" size={14} />}
          </button>
        )}

        <div className="carousel__slides">
          {slides.map((s, idx) => (
            <div
              key={s.id}
              role="group"
              aria-roledescription="slide"
              aria-label={`${idx + 1} of ${n}`}
              hidden={idx !== i}
              inert={idx !== i ? true : undefined}
              className="carousel__slide"
            >
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              {s.cta && <a href={s.cta.href}>{s.cta.label}</a>}
            </div>
          ))}
        </div>

        <div className="carousel__controls">
          <button type="button" aria-label="Previous slide"
                  onClick={() => go(-1)}>
            <ChevronLeft aria-hidden="true" size={16} />
          </button>
          <span className="carousel__counter">{i + 1} / {n}</span>
          <button type="button" aria-label="Next slide"
                  onClick={() => go(1)}>
            <ChevronRight aria-hidden="true" size={16} />
          </button>
        </div>
      </section>

      <div role="status" aria-live="polite" className="sr-only">
        {announce}
      </div>
    </>
  );
}

import AccessibleCarousel from "./AccessibleCarousel";

export default function Homepage() {
  const slides = [
    { id: "1", title: "Fast audits", body: "Scan 10,000 pages in 2 minutes." },
    { id: "2", title: "WCAG 2.2 coverage", body: "Every success criterion mapped." },
    { id: "3", title: "Export VPAT",      body: "Share with your legal team." },
  ];

  return (
    <AccessibleCarousel
      slides={slides}
      label="Product highlights"
      autoplay
      intervalMs={5000}
    />
  );
}