my website at ewancroft.uk
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

Enhance BlueskyPostCard accessibility and image lightbox UX

- Added `title` attributes to post images and buttons for improved
accessibility and clearer hover context.
- Updated lightbox to display image alt text as a caption when
available, improving clarity for users viewing attachments.
- Ensured both `alt` and `title` attributes fall back to descriptive
defaults (e.g. “Post attachment 1”).
- Adjusted lightbox layout to cap image height and support scrollable
captions without breaking layout.
- Minor indentation and formatting clean-up for consistency.

This update improves accessibility, provides better context for images,
and enhances the overall usability of the lightbox experience.

+33 -23
+33 -23
src/lib/components/layout/main/card/BlueskyPostCard.svelte
··· 194 194 > 195 195 {#each postData.imageUrls as imageUrl, index} 196 196 <button 197 - type="button" 198 - onclick={() => 199 - openLightbox(imageUrl, postData.imageAlts?.[index] || `Post attachment ${index + 1}`)} 200 - class="h-auto w-full max-w-full overflow-hidden rounded-lg transition-opacity hover:opacity-90 focus:ring-2 focus:ring-primary-500 focus:outline-none dark:focus:ring-primary-400" 197 + type="button" 198 + onclick={() => 199 + openLightbox(imageUrl, postData.imageAlts?.[index] || `Post attachment ${index + 1}`)} 200 + class="h-auto w-full max-w-full overflow-hidden rounded-lg transition-opacity hover:opacity-90 focus:ring-2 focus:ring-primary-500 focus:outline-none dark:focus:ring-primary-400" 201 + title={postData.imageAlts?.[index] || `Post attachment ${index + 1}`} 201 202 > 202 - <img 203 - src={imageUrl} 204 - alt={postData.imageAlts?.[index] || `Post attachment ${index + 1}`} 205 - class="h-auto w-full max-w-full object-cover {postData.imageUrls.length === 4 206 - ? 'aspect-square' 207 - : postData.imageUrls.length > 1 208 - ? 'aspect-video' 209 - : isQuoted 210 - ? 'max-h-64' 211 - : 'max-h-96'}" 212 - loading="lazy" 213 - /> 214 - </button> 203 + <img 204 + src={imageUrl} 205 + alt={postData.imageAlts?.[index] || `Post attachment ${index + 1}`} 206 + title={postData.imageAlts?.[index] || `Post attachment ${index + 1}`} 207 + class="h-auto w-full max-w-full object-cover {postData.imageUrls.length === 4 208 + ? 'aspect-square' 209 + : postData.imageUrls.length > 1 210 + ? 'aspect-video' 211 + : isQuoted 212 + ? 'max-h-64' 213 + : 'max-h-96'}" 214 + loading="lazy" 215 + /> 216 + </button> 215 217 {/each} 216 218 </div> 217 219 {/if} ··· 374 376 > 375 377 <X class="h-6 w-6" /> 376 378 </button> 377 - <img 378 - src={lightboxImage.url} 379 - alt={lightboxImage.alt} 380 - class="max-h-[90vh] max-w-[90vw] object-contain" 381 - loading="lazy" 382 - /> 379 + <div class="relative flex max-h-[90vh] w-full max-w-[90vw] flex-col items-center"> 380 + <img 381 + src={lightboxImage.url} 382 + alt={lightboxImage.alt} 383 + title={lightboxImage.alt} 384 + class="max-h-[80vh] w-full object-contain" 385 + loading="lazy" 386 + /> 387 + {#if lightboxImage.alt && lightboxImage.alt !== `Post attachment ${lightboxImage.url.split('/').pop()}`} 388 + <div class="mt-4 w-full max-w-full overflow-y-auto rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white" style="max-height: calc(10vh - 2rem);"> 389 + {lightboxImage.alt} 390 + </div> 391 + {/if} 392 + </div> 383 393 </div> 384 394 {/if}