Add ZoomableImage component and use that in venue photo display

Author: egeakman

src/components/ZoomableImage.astro

@@ -0,0 +1,56 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+interface Props {
+  src: ImageMetadata;
+  alt: string;
+  width?: number;
+  zoomWidth?: number;
+  class?: string;
+}
+
+const { src, alt, width = 800, zoomWidth = 1600, class: cls } = Astro.props;
+const id = `zoom-${crypto.randomUUID()}`;
+---
+
+<figure class:list={["relative", cls]}>
+  {/* thumbnail img alt is the button's accessible name;
+  aria-describedby adds the zoom affordance as a separate description
+  (helps low-vision users who benefit from a larger image)
+  without duplicating the name; the visually-identical figcaption below
+  is hidden from assistive tech so it isn't announced a third time.
+  Thanks for reading this long note :D */}
+  <button popovertarget={id} aria-describedby={`${id}-hint`} class="block w-full cursor-zoom-in">
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      format="avif"
+      class="w-full block rounded-lg object-cover aspect-4/3"
+    />
+  </button>
+  <span id={`${id}-hint`} class="sr-only">Zoom in</span>
+  <figcaption aria-hidden="true" class="absolute inset-x-0 bottom-0 rounded-b-lg bg-linear-to-t from-black/70 to-transparent px-4 pt-10 pb-3 text-left font-mono text-xs md:text-sm text-white">
+    {alt}
+  </figcaption>
+
+  <div id={id} popover class="m-auto w-fit h-fit max-w-none p-0 border-0 bg-transparent backdrop:bg-black/80">
+    <button
+      popovertarget={id}
+      popovertargetaction="hide"
+      aria-label="Close"
+      class="absolute top-3 right-3 w-9 h-9 rounded-full bg-black/70 text-white text-lg leading-none cursor-pointer"
+    >
+      ✕
+    </button>
+    <Image
+      src={src}
+      alt={alt}
+      width={zoomWidth}
+      format="avif"
+      loading="lazy"
+      class="max-h-[90dvh] max-w-[90vw] w-auto h-auto object-contain rounded-lg"
+    />
+  </div>
+</figure>

src/sections/Venue.astro

@@ -1,8 +1,8 @@
 ---
-import { Image } from "astro:assets";
 import Section from "@components/Section.astro";
 import Prose from "@components/Prose.astro";
 import Button from "@components/Button.astro";
+import ZoomableImage from "@components/ZoomableImage.astro";
 import VenueContent from "@prose/venue.mdx";
 import { event } from "@data/event";
 import front from "@assets/venue/startgate-front.jpeg";
@@ -38,19 +38,7 @@ const venuePhotos = [
   {/* Mobile: swipeable scroll-snap carousel, peeking edge hints it scrolls */}
   <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 mt-12 sm:grid sm:grid-cols-2">
     {venuePhotos.map((photo) => (
-      <figure class="relative flex-none w-5/6 snap-start sm:w-full">
-        {/* alt is empty: photo.alt is rendered once below as the visible figcaption, so it's not read twice by screen readers */}
-        <Image
-          src={photo.src}
-          alt=""
-          width={800}
-          format="avif"
-          class="w-full block rounded-lg object-cover aspect-4/3"
-        />
-        <figcaption class="absolute inset-x-0 bottom-0 rounded-b-lg bg-linear-to-t from-black/70 to-transparent px-4 pt-10 pb-3 text-left font-mono text-xs md:text-sm text-white">
-          {photo.alt}
-        </figcaption>
-      </figure>
+      <ZoomableImage src={photo.src} alt={photo.alt} class="flex-none w-5/6 snap-start sm:w-full" />
     ))}
   </div>
 </Section>