Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Palette: Improve Lightbox counter accessibility (#235)

Browse Source 
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
This commit is contained in:
Ralksta
2026-05-31 10:03:08 +02:00
committed by GitHub
parent 746e9ae4c9
commit a91269eb42
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.Jules/palette.md
View File

@@ -9,3 +9,7 @@
## 2024-05-26 - Interactive Card ARIA Labels ## 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. **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. **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"`.

7
components/Lightbox.tsx
View File

@@ -216,8 +216,13 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
</button> </button>
{/* Counter */} {/* Counter */}
<div className={styles.counter}> <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} {currentIndex + 1} / {assets.length}
</span>
</div> </div>
{/* EXIF toggle */} {/* EXIF toggle */}

7
lib/rate-limit.ts
View File

@@ -33,12 +33,7 @@ export function getClientIp(request: NextRequest): string {
// Fallback for self-hosted environments without explicit trusted proxies: // Fallback for self-hosted environments without explicit trusted proxies:
// We have to trust headers as a best-effort, but this is vulnerable to spoofing. // We have to trust headers as a best-effort, but this is vulnerable to spoofing.
return ( return directIp ?? xRealIp ?? xForwardedFor?.split(',')[0].trim() ?? 'unknown';
directIp ??
xRealIp ??
xForwardedFor?.split(',')[0].trim() ??
'unknown'
);
} }
interface RateLimitEntry { interface RateLimitEntry {