From 5ebc900851dde11a69ac7b31cc0e107bb47ef9b2 Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Fri, 27 Mar 2026 10:36:19 +0100
Subject: [PATCH] feat(ux): Add proper ARIA attributes to Lightbox modal and
 EXIF toggle (#45)

Adds `role="dialog"`, `aria-modal="true"`, and `aria-label` to the `.overlay` container to improve screen reader accessibility. Also adds `aria-expanded` and `aria-controls` to the EXIF info toggle button, linking it to the newly ID'd `#exif-panel`.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 .Jules/palette.md       | 7 +++----
 components/Lightbox.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 2680a9d..ec1d951 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,4 +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.
+## 2024-05-24 - Lightbox ARIA Attributes
+**Learning:** Adding `role="dialog"`, `aria-modal="true"`, and `aria-label` to custom modal/lightbox overlays ensures screen readers announce them properly instead of just falling back to reading inner content without context. Additionally, toggles that show/hide panels (like the EXIF info button) must use `aria-expanded` and link to the panel via `aria-controls` for proper screen reader communication.
+**Action:** When building or modifying custom overlays or toggle buttons in the future, always verify that ARIA attributes are set correctly to match the visual behavior.
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index a036cc1..08446b9 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -104,6 +104,9 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
       onClick={handleOverlayClick}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image viewer"
     >
       {/* Close button */}
       <button className={styles.close} onClick={onClose} aria-label="Close" title="Close (Esc)">
@@ -188,6 +191,8 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
       <button
         className={styles.infoToggle}
         onClick={handleExifToggle}
+        aria-expanded={showExif}
+        aria-controls="exif-panel"
         aria-label="Toggle photo info"
         title="Toggle photo info (i)"
       >
@@ -196,7 +201,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
 
       {/* EXIF panel */}
       {showExif && (
-        <div className={styles.exifPanel}>
+        <div id="exif-panel" className={styles.exifPanel}>
           {exifLoading ? (
             <div className={styles.exifRow}>
               <span className={styles.exifLabel}>Loading...</span>