From c845df4afb8ced2651f29bd1abc84ad256f279ee Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Wed, 11 Mar 2026 23:33:00 +0100
Subject: [PATCH] feat(lightbox): add keyboard shortcut 'i' for EXIF toggle and
 title tooltips on navigation buttons [#3]

Adds a keyboard shortcut (`i` or `I`) to toggle EXIF info in the Lightbox component. Also adds descriptive `title` tooltips with keyboard shortcut hints to all interactive buttons (Close, Previous, Next, Info) in the Lightbox overlay.

This improves accessibility and the overall user experience by providing more discoverable navigation options.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 .Jules/palette.md       |  3 +++
 components/Lightbox.tsx | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..1cef59a
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-03-XX - Lightbox Accessibility
+**Learning:** Found that Lightbox overlay has good keyboard navigation (esc/left/right) but lacked tooltip hints for those controls and lacked a shortcut for EXIF data toggle.
+**Action:** Added `i` shortcut and `title` attributes on interactive elements in Lightbox.
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index 39ce916..a036cc1 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -76,6 +76,17 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
     onSwipeRight: onPrev,
   });
 
+  // Listen for 'i' key to toggle EXIF
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'i' || e.key === 'I') {
+        handleExifToggle();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleExifToggle]);
+
   // Click on overlay background → close
   const handleOverlayClick = useCallback(
     (e: React.MouseEvent) => {
@@ -95,7 +106,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
       onTouchEnd={handleTouchEnd}
     >
       {/* Close button */}
-      <button className={styles.close} onClick={onClose} aria-label="Close">
+      <button className={styles.close} onClick={onClose} aria-label="Close" title="Close (Esc)">
         <svg
           viewBox="0 0 24 24"
           fill="none"
@@ -114,6 +125,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
         className={`${styles.nav} ${styles.navPrev}`}
         onClick={onPrev}
         aria-label="Previous photo"
+        title="Previous photo (Left arrow)"
       >
         <svg
           viewBox="0 0 24 24"
@@ -153,6 +165,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
         className={`${styles.nav} ${styles.navNext}`}
         onClick={onNext}
         aria-label="Next photo"
+        title="Next photo (Right arrow)"
       >
         <svg
           viewBox="0 0 24 24"
@@ -176,6 +189,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
         className={styles.infoToggle}
         onClick={handleExifToggle}
         aria-label="Toggle photo info"
+        title="Toggle photo info (i)"
       >
         {showExif ? 'Hide Info' : 'Info'}
       </button>