From 3457912eef17b3e2f230cc5a5e4befefbcdb7a53 Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Sat, 2 May 2026 21:35:46 +0100
Subject: [PATCH] set descriptive alt text on library screenshot thumbnails

The screenshot preview img used alt="", which marks it as decorative even
though it is a real package screenshot. Pass the library name down from
Library and use it as the alt text so screen readers announce the image.
---
 components/Library/Thumbnail.tsx | 5 +++--
 components/Library/index.tsx     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/Library/Thumbnail.tsx b/components/Library/Thumbnail.tsx
index ffc757d8..9d9536ce 100644
--- a/components/Library/Thumbnail.tsx
+++ b/components/Library/Thumbnail.tsx
@@ -7,11 +7,12 @@ import tw from '~/util/tailwind';
 
 type Props = {
   url: string;
+  name: string;
 };
 
 const GITHUB_PREVIEW_MIN_WIDTH = 640;
 
-function Thumbnail({ url }: Props) {
+function Thumbnail({ url, name }: Props) {
   const { width, height } = useWindowDimensions();
 
   const [isLoaded, setLoaded] = useState(false);
@@ -56,7 +57,7 @@ function Thumbnail({ url }: Props) {
             <img
               src={url}
               onLoad={() => setLoaded(true)}
-              alt=""
+              alt={`${name} screenshot`}
               style={{
                 ...tw`rounded`,
                 maxWidth: maxPreviewImageWidth,
diff --git a/components/Library/index.tsx b/components/Library/index.tsx
index 48731de9..6bee360c 100644
--- a/components/Library/index.tsx
+++ b/components/Library/index.tsx
@@ -126,7 +126,7 @@ export default function Library({
         {!skipMetadata && Platform.OS === 'web' && library.images && library.images.length > 0 && (
           <View style={tw`mt-2 flex-row flex-wrap items-center gap-x-0.5`}>
             {library.images.map(image => (
-              <Thumbnail key={image} url={image} />
+              <Thumbnail key={image} url={image} name={libName} />
             ))}
           </View>
         )}