fix: make completion modal a little more accessible (#44508)

* fix: make completion modal a little more accessible

* remove: unneeded aria attribute

* fix: update snapshots

client/src/assets/icons/green-pass.tsx

@@ -8,15 +8,15 @@ function GreenPass(
 
   return (
     <>
-      <span className='sr-only'>{t('icons.passed')}</span>
       <svg
+        aria-label={t('icons.passed')}
         height='50'
         viewBox='0 0 200 200'
         width='50'
         xmlns='http://www.w3.org/2000/svg'
         {...props}
       >
-        <g>
+        <g aria-hidden='true'>
           <title>{t('icons.passed')}</title>
           <circle
             cx='100'

client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap

@@ -42,12 +42,8 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
       <b>
         title text
       </b>
-      <span
-        className="sr-only"
-      >
-        icons.passed
-      </span>
       <svg
+        aria-label="icons.passed"
         height="50"
         style={
           Object {
@@ -60,7 +56,9 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
         width="50"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g>
+        <g
+          aria-hidden="true"
+        >
           <title>
             icons.passed
           </title>

client/src/templates/Challenges/components/__snapshots__/completion-modal-body.test.tsx.snap

@@ -5,12 +5,8 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
   <div
     class="completion-challenge-details"
   >
-    <span
-      class="sr-only"
-    >
-      icons.passed
-    </span>
     <svg
+      aria-label="icons.passed"
       class="completion-success-icon"
       data-testid="fcc-completion-success-icon"
       height="50"
@@ -18,7 +14,9 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
       width="50"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g>
+      <g
+        aria-hidden="true"
+      >
         <title>
           icons.passed
         </title>
@@ -62,14 +60,17 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
       intro:responsive-web-design.blocks.basic-html-and-html5.title
     </div>
     <div
+      aria-label="learn.percent-complete"
       class="progress-bar-wrap"
     >
       <div
+        aria-hidden="true"
         class="progress-bar-background"
       >
         learn.percent-complete
       </div>
       <div
+        aria-hidden="true"
         class="progress-bar-percent"
         data-testid="fcc-progress-bar-percent"
         style="width: 0%;"

client/src/templates/Challenges/components/completion-modal-body.tsx

@@ -88,13 +88,19 @@ export class CompletionModalBody extends PureComponent<
         </div>
         <div className='completion-block-details'>
           <div className='completion-block-name'>{blockTitle}</div>
-          <div className='progress-bar-wrap'>
+          <div
-            <div className='progress-bar-background'>
+            className='progress-bar-wrap'
+            aria-label={t('learn.percent-complete', {
+              percent: completedPercent
+            })}
+          >
+            <div className='progress-bar-background' aria-hidden='true'>
               {t('learn.percent-complete', {
                 percent: this.state.shownPercent
               })}
             </div>
             <div
+              aria-hidden='true'
               className='progress-bar-percent'
               data-testid='fcc-progress-bar-percent'
               style={{ width: `${this.state.shownPercent}%` }}