From 2c436949f650ca3f97a46af7ee1fef20b3243364 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Thu, 17 Apr 2025 21:46:22 +0700
Subject: [PATCH] fix(client): use translation strings for alt text (#59727)

---
 client/i18n/locales/english/translations.json            | 3 +++
 .../src/components/landing/components/testimonials.tsx   | 9 +++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index d73bfaa6c9a..a70d14dd726 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -127,16 +127,19 @@
     "testimonials": {
       "heading": "Here is what our alumni say about freeCodeCamp:",
       "shawn": {
+        "img-alt": "Shawn Wang, a young-looking Asian man, smiling for a selfie with a snow-capped mountain in the background.",
         "location": "<strong>Shawn Wang</strong> in Singapore",
         "occupation": "Software Engineer at <strong>Amazon</strong>",
         "testimony": "\"It's scary to change careers. I only gained confidence that I could code by working through the hundreds of hours of free lessons on freeCodeCamp. Within a year I had a six-figure job as a Software Engineer. <strong>freeCodeCamp changed my life.</strong>\""
       },
       "sarah": {
+        "img-alt": "Sarah Chima, a young-looking Black woman, smiling for the camera while sitting in a chair.",
         "location": "<strong>Sarah Chima</strong> in Nigeria",
         "occupation": "Software Engineer at <strong>ChatDesk</strong>",
         "testimony": "\"<strong>freeCodeCamp was the gateway to my career</strong> as a software developer. The well-structured curriculum took my coding knowledge from a total beginner level to a very confident level. It was everything I needed to land my first dev job at an amazing company.\""
       },
       "emma": {
+        "img-alt": "Emma Bostian, a young-looking White woman, smiling for the camera in front of green foliage.",
         "location": "<strong>Emma Bostian</strong> in Sweden",
         "occupation": "Software Engineer at <strong>Spotify</strong>",
         "testimony": "\"I've always struggled with learning JavaScript. I've taken many courses but freeCodeCamp's course was the one which stuck. Studying JavaScript as well as data structures and algorithms on <strong>freeCodeCamp gave me the skills</strong> and confidence I needed to land my dream job as a software engineer at Spotify.\""
diff --git a/client/src/components/landing/components/testimonials.tsx b/client/src/components/landing/components/testimonials.tsx
index d21be9d1a94..8c37905bdcb 100644
--- a/client/src/components/landing/components/testimonials.tsx
+++ b/client/src/components/landing/components/testimonials.tsx
@@ -28,7 +28,7 @@ const Testimonials = (): JSX.Element => {
             data-playwright-test-label='testimonials-endorser-image-container'
           >
             <LazyImage
-              alt='Shawn Wang, a young-looking Asian man, smiling for a selfie with a snow-capped mountain in the background.'
+              alt={t('landing.testimonials.shawn.img-alt')}
               className='testimonial-image'
               src={shawnImg}
             />
@@ -37,7 +37,6 @@ const Testimonials = (): JSX.Element => {
           <div className='testimonials-footer'>
             <div className='testimonial-meta'>
               <h3 data-playwright-test-label='testimonials-endorser-location'>
-                {' '}
                 <Trans>landing.testimonials.shawn.location</Trans>
               </h3>
               <p data-playwright-test-label='testimonials-endorser-occupation'>
@@ -63,7 +62,7 @@ const Testimonials = (): JSX.Element => {
             data-playwright-test-label='testimonials-endorser-image-container'
           >
             <LazyImage
-              alt='Sarah Chima, a young-looking Black woman, smiling for the camera while sitting in a chair.'
+              alt={t('landing.testimonials.sarah.img-alt')}
               className='testimonial-image'
               src={sarahImg}
             />
@@ -72,7 +71,6 @@ const Testimonials = (): JSX.Element => {
           <div className='testimonials-footer'>
             <div className='testimonial-meta'>
               <h3 data-playwright-test-label='testimonials-endorser-location'>
-                {' '}
                 <Trans>landing.testimonials.sarah.location</Trans>
               </h3>
               <p data-playwright-test-label='testimonials-endorser-occupation'>
@@ -98,7 +96,7 @@ const Testimonials = (): JSX.Element => {
             data-playwright-test-label='testimonials-endorser-image-container'
           >
             <LazyImage
-              alt='Emma Bostian, a young-looking White woman, smiling for the camera in front of green foliage.'
+              alt={t('landing.testimonials.emma.img-alt')}
               className='testimonial-image'
               src={emmaImg}
             />
@@ -107,7 +105,6 @@ const Testimonials = (): JSX.Element => {
           <div className='testimonials-footer'>
             <div className='testimonial-meta'>
               <h3 data-playwright-test-label='testimonials-endorser-location'>
-                {' '}
                 <Trans>landing.testimonials.emma.location</Trans>
               </h3>
               <p data-playwright-test-label='testimonials-endorser-occupation'>