fix: add descriptive alt tags to listings images (#1587)

* fix: add descriptive alt tags to listings images * fix: add empty value to alt text * fix: remove redundant photo string * fix: remove redundant image string from translations
CityOfDetroit · Mar 23, 2023 · 33b33c3 · 33b33c3
1 parent a4744fe
commit 33b33c3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/detroit-ui-components/src/blocks/ImageCard.tsx b/detroit-ui-components/src/blocks/ImageCard.tsx
@@ -101,6 +101,16 @@ const ImageCard = (props: ImageCardProps) => {
     return props.images?.slice(0, 3)
   }, [props.images])
 
+  const getAltText = (index: number, displayedImages?: ImageItem[], description?: string) => {
+    if (description) {
+      return description
+    }
+    if (displayedImages && displayedImages.length > 1) {
+      return `${props.description} - ${index + 1}`
+    }
+    return props.description || ""
+  }
+
   const image = (
     <>
       <div className="image-card">
@@ -133,11 +143,7 @@ const ImageCard = (props: ImageCardProps) => {
               <img
                 key={index}
                 src={image.thumbnailUrl || image.mobileUrl || image.url}
-                alt={
-                  image.description
-                    ? image.description
-                    : `${props.description || ""} - photo ${index + 1}`
-                }
+                alt={getAltText(index, displayedImages, image.description)}
               />
             ))
           ) : (
@@ -189,14 +195,7 @@ const ImageCard = (props: ImageCardProps) => {
             <p key={index} className="mb-7">
               <picture>
                 {image.mobileUrl && <source media="(max-width: 767px)" srcSet={image.mobileUrl} />}
-                <img
-                  src={image.url}
-                  alt={
-                    image.description
-                      ? image.description
-                      : `${props.description || ""} - photo ${index + 1}`
-                  }
-                />
+                <img src={image.url} alt={getAltText(index, props.images, image.description)} />
               </picture>
             </p>
           ))}

diff --git a/sites/public/src/components/listing/ListingView.tsx b/sites/public/src/components/listing/ListingView.tsx
@@ -499,6 +499,7 @@ export const ListingView = (props: ListingProps) => {
                 }
               }
             )}
+            description={listing.name}
             tags={getImageCardTag(listing)}
             moreImagesLabel={t("listings.moreImagesLabel")}
             moreImagesDescription={t("listings.moreImagesAltDescription", {

diff --git a/sites/public/src/lib/helpers.tsx b/sites/public/src/lib/helpers.tsx
@@ -234,6 +234,7 @@ export const getListings = (listings) => {
         imageUrl: imageUrlFromListing(listing, parseInt(process.env.listingPhotoSize))[0],
         href: `/listing/${listing.id}/${listing.urlSlug}`,
         tags: getImageCardTag(listing),
+        description: listing.name,
       }}
       tableProps={{
         headers: unitSummariesHeaders,