fix(i18n): use translated text for play button (#54401)

client/i18n/locales/english/translations.json

@@ -96,7 +96,8 @@
     "update-card": "Update your card",
     "donate-now": "Donate Now",
     "confirm-amount": "Confirm amount",
-    "skip-advertisement": "Skip Advertisement"
+    "skip-advertisement": "Skip Advertisement",
+    "play-scene": "Press Play"
   },
   "landing": {
     "big-heading-1": "Learn to code — for free.",

client/src/templates/Challenges/components/scene/scene.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } from 'react';
 import { Col } from '@freecodecamp/ui';
+import { useTranslation } from 'react-i18next';
 import { FullScene } from '../../../../redux/prop-types';
 import { Loader } from '../../../../components/helpers';
 import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
@@ -17,6 +18,7 @@ export function Scene({
   isPlaying: boolean;
   setIsPlaying: (shouldPlay: boolean) => void;
 }): JSX.Element {
+  const { t } = useTranslation();
   const { setup, commands } = scene;
   const { audio, alwaysShowDialogue } = setup;
 
@@ -225,7 +227,10 @@ export function Scene({
                     setIsPlaying(true);
                   }}
                 >
-                  <img src={`${images}/play-button.png`} alt='Press Play' />
+                  <img
+                    src={`${images}/play-button.png`}
+                    alt={t('buttons.play-scene')}
+                  />
                 </button>
 
                 {!alwaysShowDialogue && (