From 1d48f600126a79cba2984b1e96433511cefbfe2b Mon Sep 17 00:00:00 2001
From: vsc-sanad <41429866+arousi@users.noreply.github.com>
Date: Fri, 14 Aug 2026 14:01:22 +0200
Subject: [PATCH] fix(a11y): add alt text to images missing it

- CoverImage.vue: generic but accurate description (the component has no
  access to what the cover belongs to).
- ImagePreview.vue: same, for the enlarged modal preview.
- UnsplashImageBrowser.vue: Unsplash's own alt_description field per
  photo, falling back to a generic description when a photo has none.
---
 frontend/src/components/CoverImage.vue           | 1 +
 frontend/src/components/ImagePreview.vue         | 2 +-
 frontend/src/components/UnsplashImageBrowser.vue | 5 ++++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CoverImage.vue b/frontend/src/components/CoverImage.vue
index 4ba94ff90..22dbbf086 100644
--- a/frontend/src/components/CoverImage.vue
+++ b/frontend/src/components/CoverImage.vue
@@ -6,6 +6,7 @@
         :class="{ 'animate-pulse': loading }"
         :style="{ objectPosition }"
         :src="validatedImageUrl"
+        alt="Cover image"
         @load="loading = false"
       />
       <div
diff --git a/frontend/src/components/ImagePreview.vue b/frontend/src/components/ImagePreview.vue
index 1f38a9078..df2204fe7 100644
--- a/frontend/src/components/ImagePreview.vue
+++ b/frontend/src/components/ImagePreview.vue
@@ -11,7 +11,7 @@
         class="flex h-full items-center justify-center"
         @click.self="$emit('update:show', false)"
       >
-        <img :src="imageUrl" class="max-h-[80%] object-contain" />
+        <img :src="imageUrl" alt="Enlarged image preview" class="max-h-[80%] object-contain" />
       </div>
     </div>
   </teleport>
diff --git a/frontend/src/components/UnsplashImageBrowser.vue b/frontend/src/components/UnsplashImageBrowser.vue
index 86ee1b5b7..9e84a4358 100644
--- a/frontend/src/components/UnsplashImageBrowser.vue
+++ b/frontend/src/components/UnsplashImageBrowser.vue
@@ -31,7 +31,10 @@
             class="h-[50px] w-[200px] overflow-hidden rounded-4 hover:opacity-80"
             @click="$emit('select', image.urls.raw)"
           >
-            <img :src="image.urls.raw + '&w=200&h=50&fit=crop&crop=entropy,faces,focalpoint'" />
+            <img
+              :src="image.urls.raw + '&w=200&h=50&fit=crop&crop=entropy,faces,focalpoint'"
+              :alt="image.alt_description || 'Unsplash photo'"
+            />
           </button>
         </div>
         <div class="mt-2 text-center text-sm text-ink-gray-4">