Thumbnail Carousel

<!--
  A thumbnail gallery, not a slide show: the strip is the primary control, so
  each thumb is a real button carrying the image's name ("Show Front view") and
  aria-current marks the one on display. The selected thumb is marked by a ring
  AND by full opacity - never by colour alone.
  The big image keeps its alt text; the thumbs are decorative repeats of it, so
  their <img> alt is empty and the button label does the talking.
-->
<div class="thumbs" data-thumbs>
  <section class="thumbs__main" aria-roledescription="carousel" aria-label="Product gallery">
    <div class="thumbs__stage" aria-live="polite">
      <img class="thumbs__image" src="/promo/all-access.svg" alt="Front view" data-thumbs-image />
    </div>
  </section>

  <div class="thumbs__strip" role="group" aria-label="Choose an image" data-thumbs-strip>
    <button class="thumbs__thumb" type="button" aria-label="Show Front view" aria-current="true" data-src="/promo/all-access.svg" data-alt="Front view">
      <img src="/promo/all-access.svg" alt="" />
    </button>
    <button class="thumbs__thumb" type="button" aria-label="Show Side view" data-src="/promo/all-access.svg" data-alt="Side view">
      <img src="/promo/all-access.svg" alt="" />
    </button>
    <button class="thumbs__thumb" type="button" aria-label="Show Detail view" data-src="/promo/all-access.svg" data-alt="Detail view">
      <img src="/promo/all-access.svg" alt="" />
    </button>
    <button class="thumbs__thumb" type="button" aria-label="Show Packaging" data-src="/promo/all-access.svg" data-alt="Packaging">
      <img src="/promo/all-access.svg" alt="" />
    </button>
  </div>
</div>

<script>
  (function () {
    document.querySelectorAll('[data-thumbs]').forEach(function (root) {
      var image = root.querySelector('[data-thumbs-image]');
      var thumbs = Array.prototype.slice.call(root.querySelectorAll('[data-thumbs-strip] button'));

      thumbs.forEach(function (thumb) {
        thumb.addEventListener('click', function () {
          image.src = thumb.dataset.src;
          // The alt travels with the image: the live region announces the new
          // name, so the user hears WHICH image they landed on.
          image.alt = thumb.dataset.alt;

          thumbs.forEach(function (other) {
            if (other === thumb) other.setAttribute('aria-current', 'true');
            else other.removeAttribute('aria-current');
          });
        });
      });
    });
  })();
</script>