-
+ const openLightbox = useCallback(
+ (index: number, method: 'click' | 'keyboard' = 'click') => {
+ setLightboxIndex(index);
+ trackGalleryEvent('gallery_lightbox_open', {
+ propertyName,
+ imageIndex: index,
+ imageCount,
+ method,
+ });
+ if (method === 'click' && index > 0) {
+ trackGalleryEvent('gallery_thumbnail_click', {
+ propertyName,
+ imageIndex: index,
+ imageCount,
+ });
+ }
+ },
+ [propertyName, imageCount],
);
- }
- return (
- <>
-
-
-
- No images available
-
- {/* Main Image */}
-
- openLightbox(0)}
- onLoad={() => setMainImageLoaded(true)}
- />
+ const closeLightbox = useCallback(() => {
+ if (lightboxIndex !== null) {
+ trackGalleryEvent('gallery_lightbox_close', {
+ propertyName,
+ imageIndex: lightboxIndex,
+ imageCount,
+ });
+ }
+ setLightboxIndex(null);
+ }, [lightboxIndex, propertyName, imageCount]);
- {/* Issue #1253 — loading skeleton, drawn over the image until it has
- loaded. It is decorative, so it is hidden from assistive tech. */}
- {!mainImageLoaded && (
-
- )}
-
- {/* Overlay with image count */}
-
- = ({
@@ -16,6 +18,7 @@ export const ImageLightbox: React.FC = ({
initialIndex = 0,
isOpen,
onClose,
+ onNavigate,
}) => {
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const [touchStart, setTouchStart] = useState(null);
@@ -45,6 +48,31 @@ export const ImageLightbox: React.FC = ({
};
}, [isOpen]);
+ const navigateNext = useCallback(() => {
+ setCurrentIndex((prev) => {
+ const next = (prev + 1) % images.length;
+ onNavigate?.(next, 'next');
+ return next;
+ });
+ }, [images.length, onNavigate]);
+
+ const navigatePrevious = useCallback(() => {
+ setCurrentIndex((prev) => {
+ const next = (prev - 1 + images.length) % images.length;
+ onNavigate?.(next, 'previous');
+ return next;
+ });
+ }, [images.length, onNavigate]);
+
+ const handleThumbnailClick = useCallback(
+ (index: number) => {
+ setCurrentIndex(index);
+ onNavigate?.(index, 'jump');
+ },
+ [onNavigate],
+ );
+
+ if (!isOpen || images.length === 0) return null;
// Keyboard navigation
useEffect(() => {
if (!isOpen) return;
@@ -70,7 +98,7 @@ export const ImageLightbox: React.FC = ({
document.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
};
- }, [isOpen, currentIndex]);
+ }, [isOpen, navigateNext, navigatePrevious, onClose]);
// Touch handlers for mobile swipe
const handleTouchStart = useCallback((e: React.TouchEvent) => {
@@ -95,21 +123,9 @@ export const ImageLightbox: React.FC = ({
if (isRightSwipe) {
navigatePrevious();
}
- }, [touchStart, touchEnd]);
+ }, [touchStart, touchEnd, navigateNext, navigatePrevious]);
- const navigateNext = () => {
- setCurrentIndex((prev) => (prev + 1) % images.length);
- };
- const navigatePrevious = () => {
- setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
- };
-
- const handleThumbnailClick = (index: number) => {
- setCurrentIndex(index);
- };
-
- if (!isOpen || images.length === 0) return null;
return (
// Issue #1252 — `role="dialog"` + `aria-modal` tell assistive tech that
diff --git a/src/components/property/__tests__/ImageGallery.integration.test.tsx b/src/components/property/__tests__/ImageGallery.integration.test.tsx
new file mode 100644
index 00000000..63a9ee29
--- /dev/null
+++ b/src/components/property/__tests__/ImageGallery.integration.test.tsx
@@ -0,0 +1,99 @@
+/**
+ * Gallery integration tests (#1256) covering keyboard nav (#1258),
+ * analytics (#1259), and memoization surface (#1257).
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ImageGallery } from '../ImageGallery';
+import * as analytics from '@/lib/galleryAnalytics';
+
+jest.mock('next/image', () => ({
+ __esModule: true,
+ default: (props: any) => {
+ // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+ return ![]()
;
+ },
+}));
+
+jest.mock('@/components/ui/SimpleErrorBoundary', () => ({
+ ErrorBoundary: ({ children }: { children: React.ReactNode }) => <>{children},
+}));
+
+const images = [
+ '/img/a.jpg',
+ '/img/b.jpg',
+ '/img/c.jpg',
+ '/img/d.jpg',
+];
+
+describe('ImageGallery integration (#1256–#1259)', () => {
+ let trackSpy: jest.SpyInstance;
+
+ beforeEach(() => {
+ trackSpy = jest.spyOn(analytics, 'trackGalleryEvent').mockImplementation(() => {});
+ });
+
+ afterEach(() => {
+ trackSpy.mockRestore();
+ });
+
+ it('renders empty state when there are no images', () => {
+ render(
-
+ const handleLightboxNavigate = useCallback(
+ (nextIndex: number, direction: 'next' | 'previous' | 'jump') => {
+ trackGalleryEvent('gallery_lightbox_navigate', {
+ propertyName,
+ imageIndex: nextIndex,
+ imageCount,
+ direction,
+ });
+ },
+ [propertyName, imageCount],
+ );
+
+ // #1258 — grid keyboard navigation
+ const handleGridKeyDown = useCallback(
+ (e: React.KeyboardEvent, index: number) => {
+ if (!images || images.length === 0) return;
+ let next = index;
+ switch (e.key) {
+ case 'ArrowRight':
+ case 'ArrowDown':
+ e.preventDefault();
+ next = Math.min(images.length - 1, index + 1);
+ break;
+ case 'ArrowLeft':
+ case 'ArrowUp':
+ e.preventDefault();
+ next = Math.max(0, index - 1);
+ break;
+ case 'Home':
+ e.preventDefault();
+ next = 0;
+ break;
+ case 'End':
+ e.preventDefault();
+ next = images.length - 1;
+ break;
+ case 'Enter':
+ case ' ':
+ e.preventDefault();
+ openLightbox(index, 'keyboard');
+ trackGalleryEvent('gallery_keyboard_navigate', {
+ propertyName,
+ imageIndex: index,
+ imageCount,
+ method: 'keyboard',
+ });
+ return;
+ default:
+ return;
+ }
+ setFocusIndex(next);
+ // Focus thumbnail buttons when index maps into the strip (main = 0)
+ if (next === 0) {
+ // main image is a button too
+ thumbRefs.current[0]?.focus();
+ } else {
+ thumbRefs.current[next]?.focus();
+ }
+ trackGalleryEvent('gallery_keyboard_navigate', {
+ propertyName,
+ imageIndex: next,
+ imageCount,
+ method: 'keyboard',
+ });
+ },
+ [images, openLightbox, propertyName, imageCount],
+ );
+
+ if (!images || images.length === 0) {
+ return (
+ Click to view all {images.length} images
-
+
+ );
+ }
- {/* Thumbnail Gallery */}
- {images.length > 1 && (
-
+
+
No images available
- {images.slice(1, 5).map((image, index) => {
- const actualIndex = index + 1;
- return (
-
- {/* Lightbox */}
- openLightbox(actualIndex)}
+ return (
+ <>
+
+ )}
+
+ {/* Main Image */}
+
+
+ {/* Thumbnail strip */}
+ {thumbSources.length > 0 && (
+
+
+ )}
+
+ {thumbSources.map((image, index) => {
+ const actualIndex = index + 1;
+ return (
+
+ );
+ })}
+
+ {images.length > 5 && (
+
- )}
-