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

feat(lightbox): add keyboard shortcut 'i' for EXIF toggle and title tooltips on navigation buttons [#3]

Browse Source 
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>
This commit is contained in:
Ralksta
2026-03-11 23:33:00 +01:00
committed by GitHub
parent f3890fc6bc
commit c845df4afb
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Lightbox.tsx
View File

@@ -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>