feat: ✨ overhaul gallery component (styles, indicators, a11y)

src/components/icon.webc

@@ -322,6 +322,30 @@
   />
 </svg>
 
+<svg
+  webc:elseif="icon === 'chevron-left'"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+>
+  <!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
+  <path
+    d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
+  />
+</svg>
+
+<svg
+  webc:elseif="icon === 'chevron-right'"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+>
+  <!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
+  <path
+    d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
+  />
+</svg>
+
 <style>
   svg {
     width: 100%;

src/components/ref-gallery.webc

@@ -1,54 +1,111 @@
 <script>
-  const galleryTrack = document.querySelector('.gallery .track');
+  const gallery = document.querySelector('.gallery');
-  const galleryElements = document.querySelectorAll('.gallery .track > *');
+  const track = gallery.querySelector('.track');
-  const galleryIndicator = document.querySelector('.gallery .indicator');
+  const images = gallery.querySelectorAll('.track > *');
-  const galleryPrevious = document.querySelector('.gallery button.prev');
+  const nav = gallery.querySelector('.gallery-nav');
-  const galleryNext = document.querySelector('.gallery button.next');
+  const prevButton = gallery.querySelector('button.prev');
+  const nextButton = gallery.querySelector('button.next');
 
-  const next = () => {
+  const TOLERANCE = 2;
-    galleryTrack.scrollBy({
-      left: galleryElements[0].scrollWidth,
-      behavior: 'smooth'
-    });
-  };
-
-  const prev = () => {
-    galleryTrack.scrollBy({
-      left: galleryElements[0].scrollWidth * -1,
-      behavior: 'smooth'
-    });
-  };
-
-  const progress = ({ target: { scrollLeft, scrollWidth, offsetWidth } }) => {
-    galleryIndicator.style.width = `${(scrollLeft / (scrollWidth - offsetWidth)) * 100}%`;
-  };
 
+  const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
   const isAtEnd = () => {
-    galleryTrack.scrollLeft <= 0
+    const { scrollLeft, offsetWidth, scrollWidth } = track;
-      ? (galleryPrevious.disabled = true)
+    return Math.abs(scrollLeft + offsetWidth - scrollWidth) <= TOLERANCE;
-      : (galleryPrevious.disabled = false);
-    galleryTrack.scrollLeft >= galleryTrack.scrollWidth - galleryTrack.offsetWidth
-      ? (galleryNext.disabled = true)
-      : (galleryNext.disabled = false);
   };
 
-  galleryPrevious.addEventListener('click', prev);
+  const updateAriaCurrent = (element, index) => {
-  galleryNext.addEventListener('click', next);
+    currentIndex === index
-  galleryTrack.addEventListener('scroll', progress);
+      ? element.setAttribute('aria-current', 'true')
-  galleryTrack.addEventListener('scroll', isAtEnd);
+      : element.removeAttribute('aria-current');
-  document.addEventListener('DOMContentLoaded', isAtEnd);
+  };
+
+  const updateActiveStates = (index) => {
+    images.forEach(updateAriaCurrent);
+    nav.querySelectorAll('.indicator-btn').forEach(updateAriaCurrent);
+    prevButton.disabled = isAtStart();
+    nextButton.disabled = isAtEnd();
+  };
+
+  let currentIndex = 0;
+
+  const scrollToIndex = (index) => {
+    if (index < 0 || index >= images.length || index === currentIndex) return;
+
+    currentIndex = index;
+    images[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+
+    updateActiveStates(index);
+  };
+
+  const prev = () => scrollToIndex(currentIndex - 1);
+  const next = () => scrollToIndex(currentIndex + 1);
+
+  const resizeObserver = new ResizeObserver(() => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      scrollToIndex(currentIndex);
+    }, 100);
+  });
+  resizeObserver.observe(track);
+
+  const galleryObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && entry.intersectionRatio >= 0.75) {
+          const index = [...images].indexOf(entry.target);
+          if (index !== -1) {
+            currentIndex = index;
+            updateActiveStates(currentIndex);
+          }
+        }
+      });
+    },
+    { root: track, threshold: 0.75, rootMargin: '0px' }
+  );
+
+  const initializeGallery = () => {
+    images.forEach((el, i) => {
+      const btn = document.createElement('button');
+
+      if (i === 0) btn.setAttribute('aria-current', 'true');
+      btn.classList.add('indicator-btn');
+      btn.dataset.index = i;
+      btn.innerText = i + 1;
+      btn.setAttribute('aria-label', `Go to image ${i + 1} of ${images.length}`);
+      btn.addEventListener('click', () => scrollToIndex(Number(btn.dataset.index)));
+
+      if (i === 0) el.setAttribute('aria-current', 'true');
+      el.setAttribute('aria-label', `Image ${i + 1} of ${images.length}`);
+      el.setAttribute('tabindex', '0');
+      el.setAttribute('role', 'group');
+
+      nav.appendChild(btn);
+    });
+
+    updateActiveStates(0);
+  };
+
+  images.forEach((el) => galleryObserver.observe(el));
+  prevButton.addEventListener('click', prev);
+  nextButton.addEventListener('click', next);
+  document.addEventListener('DOMContentLoaded', () => initializeGallery());
 </script>
 
-<div class="gallery">
+<section class="gallery" aria-label="Image gallery">
-  <button class="prev"></button>
+  <button class="prev" aria-label="Previous Image">
-  <button class="next"></button>
+    <icon icon="chevron-left" webc:nokeep></icon>
+  </button>
+  <button class="next" aria-label="Next Image">
+    <icon icon="chevron-right" webc:nokeep></icon>
+  </button>
 
   <div class="track">
     <slot></slot>
   </div>
 
-  <div class="indicator"></div>
+  <nav class="gallery-nav" aria-label="Gallery"></nav>
-</div>
+</section>
 
 <style>
   .gallery {
@@ -61,56 +118,74 @@
     gap: 1em;
 
     & .prev,
-    & .next {
+    & .next,
+    & .indicator-btn {
       position: relative;
 
-      grid-row: track;
-
       font-size: 1.25em;
       color: var(--clr-text);
-
       cursor: pointer;
 
-      background-color: var(--clr-box-background);
+      background: linear-gradient(
+        to bottom right,
+        var(--clr-box-gradient-start) 0%,
+        var(--clr-box-gradient-end) 50%
+      );
 
-      border: var(--border-thin) solid var(--clr-text);
+      box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+
+      border: none;
       border-radius: 100%;
-      padding: 0.75em;
+      padding: 0.875em;
 
       z-index: 1;
 
-      @media (min-width: 32em) {
+      &:active::after {
-        font-size: 1.25em;
+        background: linear-gradient(
+          to top left,
+          var(--clr-quick-info-bg-start) 0%,
+          var(--clr-quick-info-bg-end) 50%
+        );
       }
 
       &::after {
+        content: '';
         position: absolute;
-        inset: 0;
+        inset: var(--border-thin);
-        align-content: center;
+        background: linear-gradient(
+          to bottom right,
+          var(--clr-quick-info-bg-start) 0%,
+          var(--clr-quick-info-bg-end) 50%
+        );
+        border-radius: inherit;
+        z-index: -1;
       }
+    }
+
+    & .prev,
+    & .next {
+      grid-row: track;
 
       &:disabled {
         cursor: not-allowed;
         opacity: 0.5;
       }
+
+      & svg {
+        position: absolute;
+        inset: 0;
+        padding: 0.375em;
+      }
     }
 
     & .prev {
       grid-column: prev;
       left: 0.5em;
-
-      &::after {
-        content: '«' / 'Previous';
-      }
     }
 
     & .next {
       grid-column: next;
       right: 0.5em;
-
-      &::after {
-        content: '»' / 'Next';
-      }
     }
 
     & .track {
@@ -121,13 +196,14 @@
       grid-auto-columns: 100%;
       gap: 2em;
 
+      border-radius: 1em;
+
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       scroll-behavior: smooth;
       scrollbar-width: none;
 
       & > * {
-        margin-block: 0.25em 0;
         scroll-snap-align: center;
       }
 
@@ -136,26 +212,56 @@
       }
     }
 
-    & .ref-image img {
+    & .ref-image {
-      width: 100%;
+      & :first-child {
-      height: 35em;
+        grid-row: image / caption;
-      object-fit: cover;
+      }
+
+      & img {
+        width: 100%;
+        height: 80vw;
+        object-fit: cover;
+      }
+
+      & .caption {
+        font-size: 0.875em;
+        text-wrap: balance;
+
+        background: oklch(from var(--clr-box-background) l c h / 0.75);
+
+        padding-block: 0.5em;
+        padding-inline: 1em;
+      }
     }
 
-    & .indicator {
+    & .gallery-nav {
-      grid-row: track;
+      --indicator-size: 2.5em;
+
+      grid-row: progress;
       grid-column: prev / next;
-      place-self: start;
 
-      height: 0.25em;
+      display: grid;
-      width: 1em;
+      grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
-      min-width: 1em;
+      gap: 0.5em;
+      place-content: center;
+      place-items: center;
+      font-size: 0.875em;
+    }
 
-      background-color: var(--clr-gallery-indicator);
+    & .indicator-btn {
+      font-size: 1em;
+      width: var(--indicator-size);
+      height: var(--indicator-size);
+      padding: 0;
+      aspect-ratio: 1 / 1;
+    }
 
-      z-index: 1;
+    & .indicator-btn[aria-current='true']::after {
-
+      background: linear-gradient(
-      transition: width 0.4s ease-in-out 0.1s;
+        to top left,
+        var(--clr-quick-info-bg-start) 0%,
+        var(--clr-quick-info-bg-end) 50%
+      );
     }
   }
 </style>

src/components/ref-img.webc

@@ -17,13 +17,17 @@
 <style>
   .ref-image {
     display: grid;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
     place-content: center;
     row-gap: 1rem;
 
     margin-block: 0;
     margin-inline: auto;
 
+    & :first-child {
+      grid-area: image;
+    }
+
     & img {
       display: block;
       width: 100%;
@@ -38,6 +42,7 @@
     }
 
     & .caption {
+      grid-area: caption;
       text-align: center;
     }
   }