refactor: 🛠️ add alt to card picture

Author: yjaaidi

apps/101-component-testing-solution/app/recipe/recipe-preview.tsx

@@ -11,7 +11,10 @@ export function RecipePreview({
   children?: ReactNode;
 }) {
   return (
-    <Card pictureUri={recipe.pictureUri} role="article">
+    <Card
+      picture={{ alt: `${recipe.name} picture`, uri: recipe.pictureUri }}
+      role="article"
+    >
       <h2 className={styles.name}>{recipe.name}</h2>
       {children}
     </Card>

apps/101-component-testing-solution/app/shared/card.tsx

@@ -2,17 +2,22 @@ import { ReactNode } from 'react';
 import styles from './card.module.css';
 
 export function Card({
-  pictureUri,
+  picture,
   role,
   children,
 }: {
-  pictureUri?: string;
+  picture?: {
+    alt: string;
+    uri: string;
+  };
   role?: string;
   children: ReactNode;
 }) {
   return (
     <div className={styles.card} role={role}>
-      {pictureUri && <img className={styles.picture} src={pictureUri} alt="" />}
+      {picture && (
+        <img alt={picture.alt} className={styles.picture} src={picture.uri} />
+      )}
       <div className={styles.content}>{children}</div>
     </div>
   );

apps/101-component-testing-starter/app/recipe/recipe-preview.tsx

@@ -11,7 +11,10 @@ export function RecipePreview({
   children?: ReactNode;
 }) {
   return (
-    <Card pictureUri={recipe.pictureUri} role="article">
+    <Card
+      picture={{ alt: `${recipe.name} picture`, uri: recipe.pictureUri }}
+      role="article"
+    >
       <h2 className={styles.name}>{recipe.name}</h2>
       {children}
     </Card>

apps/101-component-testing-starter/app/shared/card.tsx

@@ -2,17 +2,22 @@ import { ReactNode } from 'react';
 import styles from './card.module.css';
 
 export function Card({
-  pictureUri,
+  picture,
   role,
   children,
 }: {
-  pictureUri?: string;
+  picture?: {
+    alt: string;
+    uri: string;
+  };
   role?: string;
   children: ReactNode;
 }) {
   return (
     <div className={styles.card} role={role}>
-      {pictureUri && <img className={styles.picture} src={pictureUri} alt="" />}
+      {picture && (
+        <img alt={picture.alt} className={styles.picture} src={picture.uri} />
+      )}
       <div className={styles.content}>{children}</div>
     </div>
   );

apps/102-props-and-callbacks-solution/app/recipe/recipe-preview.tsx

@@ -11,7 +11,10 @@ export function RecipePreview({
   children?: ReactNode;
 }) {
   return (
-    <Card pictureUri={recipe.pictureUri} role="article">
+    <Card
+      picture={{ alt: `${recipe.name} picture`, uri: recipe.pictureUri }}
+      role="article"
+    >
       <h2 className={styles.name}>{recipe.name}</h2>
       {children}
     </Card>

apps/102-props-and-callbacks-solution/app/shared/card.tsx

@@ -2,17 +2,22 @@ import { ReactNode } from 'react';
 import styles from './card.module.css';
 
 export function Card({
-  pictureUri,
+  picture,
   role,
   children,
 }: {
-  pictureUri?: string;
+  picture?: {
+    alt: string;
+    uri: string;
+  };
   role?: string;
   children: ReactNode;
 }) {
   return (
     <div className={styles.card} role={role}>
-      {pictureUri && <img className={styles.picture} src={pictureUri} alt="" />}
+      {picture && (
+        <img alt={picture.alt} className={styles.picture} src={picture.uri} />
+      )}
       <div className={styles.content}>{children}</div>
     </div>
   );

apps/102-props-and-callbacks-starter/app/recipe/recipe-preview.tsx

@@ -11,7 +11,10 @@ export function RecipePreview({
   children?: ReactNode;
 }) {
   return (
-    <Card pictureUri={recipe.pictureUri} role="article">
+    <Card
+      picture={{ alt: `${recipe.name} picture`, uri: recipe.pictureUri }}
+      role="article"
+    >
       <h2 className={styles.name}>{recipe.name}</h2>
       {children}
     </Card>

apps/102-props-and-callbacks-starter/app/shared/card.tsx

@@ -2,17 +2,22 @@ import { ReactNode } from 'react';
 import styles from './card.module.css';
 
 export function Card({
-  pictureUri,
+  picture,
   role,
   children,
 }: {
-  pictureUri?: string;
+  picture?: {
+    alt: string;
+    uri: string;
+  };
   role?: string;
   children: ReactNode;
 }) {
   return (
     <div className={styles.card} role={role}>
-      {pictureUri && <img className={styles.picture} src={pictureUri} alt="" />}
+      {picture && (
+        <img alt={picture.alt} className={styles.picture} src={picture.uri} />
+      )}
       <div className={styles.content}>{children}</div>
     </div>
   );

apps/201-test-doubles-solution/app/recipe/recipe-preview.tsx

@@ -11,7 +11,10 @@ export function RecipePreview({
   children?: ReactNode;
 }) {
   return (
-    <Card pictureUri={recipe.pictureUri} role="article">
+    <Card
+      picture={{ alt: `${recipe.name} picture`, uri: recipe.pictureUri }}
+      role="article"
+    >
       <h2 className={styles.name}>{recipe.name}</h2>
       {children}
     </Card>

apps/201-test-doubles-solution/app/shared/card.tsx

@@ -2,17 +2,22 @@ import { ReactNode } from 'react';
 import styles from './card.module.css';
 
 export function Card({
-  pictureUri,
+  picture,
   role,
   children,
 }: {
-  pictureUri?: string;
+  picture?: {
+    alt: string;
+    uri: string;
+  };
   role?: string;
   children: ReactNode;
 }) {
   return (
     <div className={styles.card} role={role}>
-      {pictureUri && <img className={styles.picture} src={pictureUri} alt="" />}
+      {picture && (
+        <img alt={picture.alt} className={styles.picture} src={picture.uri} />
+      )}
       <div className={styles.content}>{children}</div>
     </div>
   );