update Image to use single component for picture and make div a figure instead of a div

Author: oliverabrahams

dotcom-rendering/src/components/ProductCardImage.tsx

@@ -20,8 +20,20 @@ export const ProductCardImage = ({
 		return null;
 	}
 
+	const ProductPicture = () => (
+		<Picture
+			role={'productCard'}
+			format={format}
+			master={image.url}
+			alt={image.alt}
+			height={image.height}
+			width={image.width}
+			loading={'eager'}
+		/>
+	);
+
 	return (
-		<div>
+		<figure>
 			{url ? (
 				<a
 					href={url}
@@ -36,33 +48,17 @@ export const ProductCardImage = ({
 						}
 					`}
 				>
-					<Picture
-						role={'productCard'}
-						format={format}
-						master={image.url}
-						alt={image.alt}
-						height={image.height}
-						width={image.width}
-						loading={'eager'}
-					/>
+					<ProductPicture />
 				</a>
 			) : (
-				<Picture
-					role={'productCard'}
-					format={format}
-					master={image.url}
-					alt={image.alt}
-					height={image.height}
-					width={image.width}
-					loading={'eager'}
-				/>
+				<ProductPicture />
 			)}
 			<Caption
 				format={format}
 				displayCredit={image.displayCredit}
 				credit={image.credit}
 				isOverlaid={false}
 			/>
-		</div>
+		</figure>
 	);
 };