fix(client): accessibility icon component to use closed captions icon (#52972)

client/src/assets/icons/accessibility.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-function AccessibilityIcon(
-  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-): JSX.Element {
-  return (
-    <>
-      <svg
-        fill={props.fill || 'var(--gray-00)'}
-        xmlns='http://www.w3.org/2000/svg'
-        width='452.000000pt'
-        height='452.000000pt'
-        viewBox='0 0 452.000000 452.000000'
-        preserveAspectRatio='xMidYMid meet'
-        {...props}
-      >
-        <g
-          transform='translate(0.000000,452.000000) scale(0.100000,-0.100000)'
-          fill={props.fill || 'var(--gray-00)'}
-          stroke='none'
-        >
-          <path
-            d='M1980 4325 c-683 -95 -1267 -511 -1578 -1123 -153 -301 -222 -593
--222 -942 0 -349 69 -641 222 -942 209 -413 540 -735 963 -939 279 -135 564
--198 892 -199 348 0 645 69 945 222 625 317 1043 917 1128 1618 15 124 12 382
--5 517 -120 926 -862 1668 -1788 1788 -143 18 -424 18 -557 0z m539 -190 c854
--122 1514 -795 1621 -1655 13 -109 13 -331 0 -440 -60 -485 -295 -919 -665
--1228 -347 -291 -763 -442 -1215 -442 -306 0 -588 67 -854 203 -838 428 -1237
-1397 -941 2285 65 195 187 421 312 577 299 376 733 626 1213 699 126 19 398
-19 529 1z'
-          />
-          <path
-            d='M2153 3876 c-218 -71 -320 -310 -221 -515 31 -63 107 -137 176 -169
-49 -23 70 -27 152 -27 82 0 103 4 152 27 278 130 285 525 12 659 -55 27 -80
-33 -147 36 -51 2 -98 -2 -124 -11z m183 -195 c97 -44 128 -171 63 -263 -24
--33 -95 -68 -139 -68 -44 0 -115 35 -139 68 -65 92 -34 219 63 263 23 10 57
-19 76 19 19 0 53 -9 76 -19z'
-          />
-          <path
-            d='M1075 3196 c-93 -44 -135 -112 -135 -218 1 -76 28 -137 82 -181 26
--21 143 -67 405 -161 l368 -131 3 -302 2 -302 -115 -460 c-63 -254 -115 -475
--115 -492 0 -120 104 -228 220 -229 75 0 121 18 171 69 46 46 47 50 170 418
-68 205 126 373 129 373 3 0 61 -168 129 -372 123 -369 124 -373 170 -419 50
--51 96 -69 171 -69 116 1 220 109 220 229 0 17 -52 238 -115 492 l-115 460 2
-301 3 302 368 131 c263 95 378 141 404 162 56 45 83 104 83 180 0 107 -42 175
--135 219 -87 41 -113 36 -489 -91 l-338 -115 -358 0 -357 0 -339 115 c-376
-127 -402 132 -489 91z m451 -281 l352 -115 382 0 382 0 352 115 c193 63 354
-115 358 115 4 0 14 -7 22 -16 17 -17 20 -42 8 -62 -5 -6 -197 -79 -428 -161
-l-419 -149 -3 -384 -3 -383 117 -467 c95 -382 114 -471 104 -483 -16 -19 -44
--19 -59 -1 -15 17 -331 963 -331 989 0 36 -29 75 -65 87 -66 22 -135 -23 -135
--87 0 -26 -316 -972 -331 -989 -15 -18 -43 -18 -59 1 -10 12 9 101 104 483
-l117 467 -3 384 -3 383 -420 149 c-230 82 -423 155 -427 162 -12 19 -9 44 8
-61 8 9 18 16 22 16 4 0 165 -52 358 -115z'
-          />
-        </g>
-      </svg>
-    </>
-  );
-}
-
-AccessibilityIcon.displayName = 'AccessibilityIcon';
-
-export default AccessibilityIcon;

client/src/assets/icons/closedcaptions.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function ClosedCaptionsIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        viewBox='0 0 256 256'
+        fill={props.fill || 'var(--gray-00)'}
+      >
+        <rect width='256' height='256' fill='none' />
+        <path d='M216,40H40A16.01833,16.01833,0,0,0,24,56V200a16.01833,16.01833,0,0,0,16,16H216a16.01833,16.01833,0,0,0,16-16V56A16.01833,16.01833,0,0,0,216,40ZM96,148a19.85259,19.85259,0,0,0,14.28613-6.00293,7.99956,7.99956,0,0,1,11.42774,11.19727,36,36,0,1,1,0-50.38868,7.99956,7.99956,0,0,1-11.42774,11.19727A20.00012,20.00012,0,1,0,96,148Zm72,0a19.85259,19.85259,0,0,0,14.28613-6.00293,7.99956,7.99956,0,0,1,11.42774,11.19727,36,36,0,1,1,0-50.38868,7.99956,7.99956,0,0,1-11.42774,11.19727A20.00012,20.00012,0,1,0,168,148Z' />
+      </svg>
+    </>
+  );
+}
+
+ClosedCaptionsIcon.displayName = 'ClosedCaptionsIcon';
+
+export default ClosedCaptionsIcon;

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } f
 import { Col } from '@freecodecamp/ui';
 import { FullScene } from '../../../../redux/prop-types';
 import { Loader } from '../../../../components/helpers';
-import AccessibilityIcon from '../../../../assets/icons/accessibility';
+import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
 import { sounds, images, backgrounds } from './scene-assets';
 import Character from './character';
 
@@ -197,10 +197,11 @@ export function Scene({ scene }: { scene: FullScene }): JSX.Element {
                 {!alwaysShowDialogue && (
                   <button
                     className='scene-start-btn scene-a11y-btn'
-                    aria-label='Accessibility On/Off'
+                    aria-label='closed captions'
+                    aria-pressed={accessibilityOn}
                     onClick={() => setAccessibilityOn(!accessibilityOn)}
                   >
-                    <AccessibilityIcon
+                    <ClosedCaptionsIcon
                       fill={
                         accessibilityOn ? 'var(--gray-00)' : 'var(--gray-15)'
                       }