Accessible Carousel / Slider Pattern

<!-- Carousel wrapper -->
<div class="carousel" role="group"
     aria-roledescription="carousel"
     aria-label="Featured Patterns">

  <!-- Slide track -->
  <div class="carousel__track">
    <div class="carousel__slide" role="group"
         aria-roledescription="slide"
         aria-label="1 of 4">
      <!-- Slide content -->
    </div>
    <div class="carousel__slide" role="group"
         aria-roledescription="slide"
         aria-label="2 of 4">
      <!-- Slide content -->
    </div>
    <!-- ...more slides -->
  </div>

  <!-- Live region for screen reader announcements -->
  <div aria-live="polite" aria-atomic="true"
       class="sr-only" id="carousel-live"></div>
</div>

<!-- Navigation -->
<button type="button" aria-label="Previous slide">
  &lsaquo;
</button>
<button type="button" aria-label="Next slide">
  &rsaquo;
</button>

<!-- Dot indicators -->
<div role="group" aria-label="Slide navigation">
  <button aria-label="Go to slide 1"
          aria-pressed="true"></button>
  <button aria-label="Go to slide 2"
          aria-pressed="false"></button>
  <!-- ...more dots -->
</div>

<!-- Play / Pause control -->
<button type="button"
        aria-label="Start auto-rotation">
  Play
</button>

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
}

.carousel__track {
  display: flex;
  transition: transform 0.4s ease;
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    transition: none;
  }
}

.carousel__slide {
  min-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

/* Navigation arrows */
.carousel-nav {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-nav:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
}

/* Dot indicators */
.carousel-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid #6b7280;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.carousel-dot[aria-pressed="true"] {
  background: #5b2a86;
  border-color: #5b2a86;
}

/* Visually hidden live region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

const carousel = document.querySelector('.carousel');
const track = carousel.querySelector('.carousel__track');
const slides = carousel.querySelectorAll('.carousel__slide');
const dots = document.querySelectorAll('.carousel-dot');
const prevBtn = document.querySelector('.carousel-prev');
const nextBtn = document.querySelector('.carousel-next');
const playPauseBtn = document.querySelector('.carousel-playpause');
const liveRegion = document.getElementById('carousel-live');

let currentSlide = 0;
let isPlaying = false;
let autoRotateTimer = null;
const INTERVAL = 5000; // 5 seconds

function goToSlide(index) {
  currentSlide = (index + slides.length) % slides.length;
  track.style.transform =
    `translateX(-${currentSlide * 100}%)`;

  // Update dot indicators
  dots.forEach((dot, i) => {
    dot.setAttribute('aria-pressed',
      i === currentSlide ? 'true' : 'false');
  });

  // Update slide aria-labels
  slides.forEach((slide, i) => {
    slide.setAttribute('aria-label',
      `${i + 1} of ${slides.length}`);
  });

  // Announce to screen readers
  liveRegion.textContent =
    `Slide ${currentSlide + 1} of ${slides.length}`;
}

prevBtn.addEventListener('click', () => {
  goToSlide(currentSlide - 1);
});

nextBtn.addEventListener('click', () => {
  goToSlide(currentSlide + 1);
});

dots.forEach((dot, i) => {
  dot.addEventListener('click', () => goToSlide(i));
});

// Auto-rotation
function startAutoRotate() {
  isPlaying = true;
  autoRotateTimer = setInterval(() => {
    goToSlide(currentSlide + 1);
  }, INTERVAL);
  playPauseBtn.setAttribute('aria-label',
    'Stop auto-rotation');
}

function stopAutoRotate() {
  isPlaying = false;
  clearInterval(autoRotateTimer);
  playPauseBtn.setAttribute('aria-label',
    'Start auto-rotation');
}

playPauseBtn.addEventListener('click', () => {
  if (isPlaying) stopAutoRotate();
  else startAutoRotate();
});

// Pause on hover and focus (SC 2.2.2)
carousel.addEventListener('mouseenter', () => {
  if (isPlaying) clearInterval(autoRotateTimer);
});
carousel.addEventListener('mouseleave', () => {
  if (isPlaying) {
    autoRotateTimer = setInterval(() => {
      goToSlide(currentSlide + 1);
    }, INTERVAL);
  }
});
carousel.addEventListener('focusin', () => {
  if (isPlaying) clearInterval(autoRotateTimer);
});
carousel.addEventListener('focusout', () => {
  if (isPlaying) {
    autoRotateTimer = setInterval(() => {
      goToSlide(currentSlide + 1);
    }, INTERVAL);
  }
});