From a91269eb4210110ebc1dbc6a3135b05bfa372d25 Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Sun, 31 May 2026 10:03:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Lightbox=20?=
 =?UTF-8?q?counter=20accessibility=20(#235)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 .Jules/palette.md       | 4 ++++
 components/Lightbox.tsx | 9 +++++++--
 lib/rate-limit.ts       | 7 +------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3f60239..8321d34 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -9,3 +9,7 @@
 ## 2024-05-26 - Interactive Card ARIA Labels
 **Learning:** When building interactive card components that contain multiple pieces of text or badges (like titles and photo counts), screen readers may announce them in a fragmented or confusing way.
 **Action:** Always apply a comprehensive `aria-label` to the parent link/container that encompasses all meaningful visual data (e.g., titles and item counts). Use `aria-hidden="true"` on redundant text or visual child elements, and set `alt=""` on decorative images to consolidate screen reader announcements into a single, accurate interaction point.
+
+## 2024-06-18 - Dynamic Numeric Counters ARIA
+**Learning:** When displaying dynamic numeric text changes during navigation (like a lightbox image counter), the visual presentation (e.g., "1 / 5") does not provide sufficient context for screen reader users and might not be announced automatically.
+**Action:** Wrap the counter container with `aria-live="polite"` and `aria-atomic="true"`. Use `.sr-only` to provide a context-rich screen reader string (e.g., "Photo 1 of 5") and hide the visual short-hand using `aria-hidden="true"`.
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index a5492f6..6ee76f9 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -216,8 +216,13 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
       </button>
 
       {/* Counter */}
-      <div className={styles.counter}>
-        {currentIndex + 1} / {assets.length}
+      <div className={styles.counter} aria-live="polite" aria-atomic="true">
+        <span className="sr-only">
+          Photo {currentIndex + 1} of {assets.length}
+        </span>
+        <span aria-hidden="true">
+          {currentIndex + 1} / {assets.length}
+        </span>
       </div>
 
       {/* EXIF toggle */}
diff --git a/lib/rate-limit.ts b/lib/rate-limit.ts
index 0411e7a..33aa971 100644
--- a/lib/rate-limit.ts
+++ b/lib/rate-limit.ts
@@ -33,12 +33,7 @@ export function getClientIp(request: NextRequest): string {
 
   // Fallback for self-hosted environments without explicit trusted proxies:
   // We have to trust headers as a best-effort, but this is vulnerable to spoofing.
-  return (
-    directIp ??
-    xRealIp ??
-    xForwardedFor?.split(',')[0].trim() ??
-    'unknown'
-  );
+  return directIp ?? xRealIp ?? xForwardedFor?.split(',')[0].trim() ?? 'unknown';
 }
 
 interface RateLimitEntry {