Feature/941 958 lazy image focus trap

Cargo.toml

@@ -3,5 +3,8 @@ name = "agora_event_geotag"
 version = "0.1.0"
 edition = "2021"
 
+[lints.rust]
+unexpected_cfgs = "allow"
+
 [dependencies]
 soroban-sdk = "20.0.0"

apps/web/__tests__/focus-trap-modal.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { TicketModal } from "@/components/events/TicketModal";
+
+vi.mock("next/image", () => ({
+  default: ({ src, alt }: { src: string; alt: string }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={src} alt={alt} />
+  ),
+}));
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <svg data-testid="qr" data-value={value} />,
+}));
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
+const mockEvent = {
+  id: 1,
+  title: "Test Event",
+  price: "10.00",
+  location: "Online",
+  date: "Sat, 27 Jun",
+};
+
+describe("TicketModal focus trap", () => {
+  it("has role=dialog and aria-modal when open", () => {
+    render(
+      <TicketModal
+        isOpen={true}
+        onClose={vi.fn()}
+        event={mockEvent}
+        initialQuantity={1}
+      />
+    );
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(dialog).toHaveAttribute("aria-labelledby", "ticket-modal-title");
+  });
+
+  it("Tab key does not move focus outside the modal", () => {
+    const outsideBtn = document.createElement("button");
+    outsideBtn.textContent = "Outside";
+    document.body.appendChild(outsideBtn);
+
+    render(
+      <TicketModal
+        isOpen={true}
+        onClose={vi.fn()}
+        event={mockEvent}
+        initialQuantity={1}
+      />
+    );
+
+    const dialog = screen.getByRole("dialog");
+    const focusableEls = dialog.querySelectorAll<HTMLElement>(
+      'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])'
+    );
+
+    expect(focusableEls.length).toBeGreaterThan(0);
+
+    const lastEl = focusableEls[focusableEls.length - 1];
+    lastEl.focus();
+
+    fireEvent.keyDown(document, { key: "Tab", shiftKey: false });
+
+    const activeEl = document.activeElement;
+    expect(dialog.contains(activeEl)).toBe(true);
+    expect(activeEl).not.toBe(outsideBtn);
+
+    document.body.removeChild(outsideBtn);
+  });
+
+  it("calls onClose when Escape is pressed", () => {
+    const onClose = vi.fn();
+    render(
+      <TicketModal
+        isOpen={true}
+        onClose={onClose}
+        event={mockEvent}
+        initialQuantity={1}
+      />
+    );
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("does not render when isOpen is false", () => {
+    render(
+      <TicketModal
+        isOpen={false}
+        onClose={vi.fn()}
+        event={mockEvent}
+        initialQuantity={1}
+      />
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});

apps/web/__tests__/lazy-image.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { LazyImage } from "@/components/ui/LazyImage";
+
+describe("LazyImage", () => {
+  beforeEach(() => {
+    const mockObserver = {
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    };
+    vi.stubGlobal(
+      "IntersectionObserver",
+      vi.fn(() => mockObserver)
+    );
+  });
+
+  it("renders with placeholder initially", () => {
+    render(
+      <LazyImage src="/real.jpg" alt="test" placeholderSrc="/placeholder.jpg" />
+    );
+    const img = screen.getByRole("img");
+    expect(img).toHaveAttribute("src", "/placeholder.jpg");
+    expect(img).toHaveAttribute("data-src", "/real.jpg");
+  });
+
+  it("renders real src when IntersectionObserver is not available", () => {
+    vi.stubGlobal("IntersectionObserver", undefined);
+    render(<LazyImage src="/real.jpg" alt="test" />);
+    const img = screen.getByRole("img");
+    expect(img).toHaveAttribute("src", "/real.jpg");
+  });
+
+  it("has blur class before load and revealed class after", () => {
+    vi.stubGlobal("IntersectionObserver", undefined);
+    render(<LazyImage src="/real.jpg" alt="test" />);
+    const img = screen.getByRole("img");
+    expect(img).toHaveClass("lazy-image--revealed");
+  });
+
+  it("applies extra className", () => {
+    vi.stubGlobal("IntersectionObserver", undefined);
+    render(<LazyImage src="/real.jpg" alt="test" className="rounded-lg" />);
+    expect(screen.getByRole("img")).toHaveClass("rounded-lg");
+  });
+});

apps/web/app/globals.css

@@ -127,3 +127,14 @@ select:focus-visible,
 [data-theme="dark"] .border-black {
   border-color: var(--color-subtle);
 }
+
+/* ── LazyImage blur-up effect ── */
+.lazy-image {
+  transition: filter 0.4s ease;
+}
+.lazy-image--blurred {
+  filter: blur(8px);
+}
+.lazy-image--revealed {
+  filter: blur(0);
+}

apps/web/components/events/TicketModal.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { QRCodeSVG } from "qrcode.react";
 import { toast } from "sonner";
 import { X, Minus, Plus, Ticket, ArrowRight, CheckCircle2, Gift } from "@/components/ui/icons";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { useFocusTrap } from "@/hooks/useFocusTrap";
 
 interface TicketModalProps {
   isOpen: boolean;
@@ -28,7 +29,7 @@ export function TicketModal({ isOpen, onClose, event, initialQuantity }: TicketM
   const [recipientWallet, setRecipientWallet] = useState<string>("");
   const [isGiftMode, setIsGiftMode] = useState(false);
 
-  const modalRef = useRef<HTMLDivElement>(null);
+  const modalRef = useFocusTrap<HTMLDivElement>(isOpen);
 
   const isFree = event.price.toLowerCase() === "free";
   const unitPrice = isFree ? 0 : parseFloat(event.price.replace("$", ""));
@@ -39,60 +40,14 @@ export function TicketModal({ isOpen, onClose, event, initialQuantity }: TicketM
     if (!isOpen) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      // 1. Handle Escape Close
       if (e.key === "Escape") {
         onClose();
-        return;
-      }
-
-      // 2. Focus Trap Logic
-      if (e.key === "Tab" && modalRef.current) {
-        const focusableSelectors = [
-          'a[href]',
-          'area[href]',
-          'input:not([disabled])',
-          'select:not([disabled])',
-          'textarea:not([disabled])',
-          'button:not([disabled])',
-          'iframe',
-          'object',
-          'embed',
-          '[contenteditable]',
-          '[tabindex]:not([tabindex="-1"])'
-        ].join(',');
-
-        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(focusableSelectors);
-        if (focusableElements.length === 0) return;
-
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
-        if (e.shiftKey) {
-          if (document.activeElement === firstElement) {
-            e.preventDefault();
-            lastElement.focus();
-          }
-        } else {
-          if (document.activeElement === lastElement) {
-            e.preventDefault();
-            firstElement.focus();
-          }
-        }
       }
     };
 
-    // Prevent background page content layout scrolling while modal layer is active
     document.body.style.overflow = "hidden";
     window.addEventListener("keydown", handleKeyDown);
 
-    // Initial contextual focus alignment inside the container wrapper
-    setTimeout(() => {
-      if (modalRef.current) {
-        const focusable = modalRef.current.querySelectorAll<HTMLElement>('button, input');
-        if (focusable.length > 0) focusable[0].focus();
-      }
-    }, 50);
-
     return () => {
       document.body.style.overflow = "";
       window.removeEventListener("keydown", handleKeyDown);

apps/web/components/events/event-card.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { LazyImage } from "@/components/ui/LazyImage";
 
 /**
  * SOLUTION FOR ISSUE #449 & #711:
@@ -48,13 +49,12 @@ export function EventCard({
         <div className="flex gap-4.75">
           {/* Left Side: Image & Mobile Actions */}
           <div className="flex-shrink-0 w-[40%] sm:w-auto">
-            <Image
+            <LazyImage
               src={imageUrl}
+              alt={title}
               width={227}
               height={112}
-              alt={title}
               className="object-cover w-full h-auto rounded-lg"
-              loading="lazy"
             />
 
             {/* Price Label (Mobile Only) */}

apps/web/components/events/filter-sidebar.tsx

@@ -2,8 +2,9 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { useFocusTrap } from "@/hooks/useFocusTrap";
 
 // ─── Category options ────────────────────────────────────────────────────────
 const CATEGORIES = [
@@ -113,7 +114,7 @@ export function FilterSidebar({
   filters,
   onFiltersChange,
 }: FilterSidebarProps) {
-  const sidebarRef = useRef<HTMLDivElement>(null);
+  const sidebarRef = useFocusTrap<HTMLElement>(isOpen);
 
   const [localFilters, setLocalFilters] = useState<FilterState>(filters);
 

apps/web/components/ui/LazyImage.tsx

@@ -1,39 +1,60 @@
-import React, { useState, useEffect, useRef } from 'react';
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
 
 interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   src: string;
   alt: string;
-  placeholder?: string;
+  placeholderSrc?: string;
 }
 
-export function LazyImage({ src, alt, placeholder = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', ...props }: LazyImageProps) {
-  const [isIntersecting, setIsIntersecting] = useState(false);
+const BLANK =
+  "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+
+export function LazyImage({
+  src,
+  alt,
+  placeholderSrc = BLANK,
+  className = "",
+  ...props
+}: LazyImageProps) {
+  const supportsIO =
+    typeof window !== "undefined" && typeof window.IntersectionObserver === "function";
+  const [loaded, setLoaded] = useState(!supportsIO);
+  const [revealed, setRevealed] = useState(!supportsIO);
   const imgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
+    if (!supportsIO) return;
+
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
-          setIsIntersecting(true);
+          setLoaded(true);
           observer.disconnect();
         }
       },
-      { rootMargin: '50px' }
+      { rootMargin: "50px" }
     );
 
-    if (imgRef.current) {
-      observer.observe(imgRef.current);
-    }
-
+    if (imgRef.current) observer.observe(imgRef.current);
     return () => observer.disconnect();
   }, []);
 
   return (
     <img
       ref={imgRef}
-      src={isIntersecting ? src : placeholder}
+      src={loaded ? src : placeholderSrc}
       alt={alt}
       data-src={src}
+      onLoad={() => loaded && setRevealed(true)}
+      className={[
+        "lazy-image",
+        !revealed ? "lazy-image--blurred" : "lazy-image--revealed",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     />
   );