my website at ewancroft.uk
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
+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}