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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user