Merge pull request #695 from Financial-Times/cc/update-teaser-DAC-non…

…-descriptive-image-link-02 CON-2077, CON-2078: Adds alt text to image of video teaser
Financial-Times · Feb 3, 2023 · 7629610 · 7629610
2 parents 6d77e4c + c8bc614
commit 7629610
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/components/x-teaser/Props.d.ts b/components/x-teaser/Props.d.ts
@@ -142,6 +142,7 @@ export interface Media {
   url: string
   width: number
   height: number
+  altText?: string
 }
 
 export interface Indicators {

diff --git a/components/x-teaser/__fixtures__/video.json b/components/x-teaser/__fixtures__/video.json
@@ -20,7 +20,8 @@
   "image": {
     "url": "http://com.ft.imagepublish.upp-prod-eu.s3.amazonaws.com/a27ce49b-85b8-445b-b883-db6e2f533194",
     "width": 1920,
-    "height": 1080
+    "height": 1080,
+    "altText": "Image alt text"
   },
   "video": {
     "url": "https://next-media-api.ft.com/renditions/15218247321960/640x360.mp4",

diff --git a/components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap b/components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap
@@ -569,7 +569,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with video data 1`] = `
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=340"
         />
@@ -1647,7 +1647,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with video data 1`] =
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=640"
         />
@@ -2067,7 +2067,7 @@ exports[`x-teaser / snapshots renders a HeroVideo teaser with video data 1`] = `
               }
             >
               <img
-                alt=""
+                alt="Image alt text"
                 className="o-teaser__image"
                 src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=420"
               />
@@ -2781,7 +2781,7 @@ exports[`x-teaser / snapshots renders a Large teaser with video data 1`] = `
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=340"
         />
@@ -3859,7 +3859,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with video data 1`] =
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=240"
         />
@@ -5131,7 +5131,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with video data
         }
       >
         <img
-          alt=""
+          alt="Image alt text"
           className="o-teaser__image"
           src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.upp-prod-eu.s3.amazonaws.com%2Fa27ce49b-85b8-445b-b883-db6e2f533194?source=next&fit=scale-down&dpr=2&width=640"
         />

diff --git a/components/x-teaser/src/Image.jsx b/components/x-teaser/src/Image.jsx
@@ -17,11 +17,11 @@ const aspectRatio = ({ width, height }) => {
 	return null
 }
 
-const NormalImage = ({ src }) => <img className="o-teaser__image" src={src} alt="" />
+const NormalImage = ({ src, alt }) => <img className="o-teaser__image" src={src} alt={alt} />
 
-const LazyImage = ({ src, lazyLoad }) => {
+const LazyImage = ({ src, lazyLoad, alt }) => {
 	const lazyClassName = typeof lazyLoad === 'string' ? lazyLoad : ''
-	return <img className={`o-teaser__image ${lazyClassName}`} data-src={src} alt="" />
+	return <img className={`o-teaser__image ${lazyClassName}`} data-src={src} alt={alt} />
 }
 
 export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighestQuality, ...props }) => {
@@ -32,6 +32,7 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
 	const useImageService = !(image.url.startsWith('data:') || image.url.startsWith('blob:'))
 	const options = imageSize === 'XXL' && imageHighestQuality ? { quality: 'highest' } : {}
 	const imageSrc = useImageService ? imageService(image.url, ImageSizes[imageSize], options) : image.url
+	const alt = (image.altText || '').trim()
 	const ImageComponent = imageLazyLoad ? LazyImage : NormalImage
 
 	return (
@@ -43,9 +44,10 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
 					'data-trackable': 'image-link',
 					tabIndex: '-1',
 					'aria-hidden': 'true'
-				}}>
+				}}
+			>
 				<div className="o-teaser__image-placeholder" style={{ paddingBottom: aspectRatio(image) }}>
-					<ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} />
+					<ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} alt={alt} />
 				</div>
 			</Link>
 		</div>