From c2aa8ce3e546c585bf33c0cb936f0166a39569d0 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Thu, 16 Dec 2021 04:17:12 -0600
Subject: [PATCH] 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              |  4 ++--
 .../__snapshots__/challenge-title.test.tsx.snap     | 10 ++++------
 .../completion-modal-body.test.tsx.snap             | 13 +++++++------
 .../Challenges/components/completion-modal-body.tsx | 10 ++++++++--
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/client/src/assets/icons/green-pass.tsx b/client/src/assets/icons/green-pass.tsx
index c4075c6b5e9..ea641726fe6 100644
--- a/client/src/assets/icons/green-pass.tsx
+++ b/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'
diff --git a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
index 293a4fe4889..1d274fc5d25 100644
--- a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
+++ b/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>
diff --git a/client/src/templates/Challenges/components/__snapshots__/completion-modal-body.test.tsx.snap b/client/src/templates/Challenges/components/__snapshots__/completion-modal-body.test.tsx.snap
index 731152dc193..1461e43babf 100644
--- a/client/src/templates/Challenges/components/__snapshots__/completion-modal-body.test.tsx.snap
+++ b/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%;"
diff --git a/client/src/templates/Challenges/components/completion-modal-body.tsx b/client/src/templates/Challenges/components/completion-modal-body.tsx
index 3b943a4613f..1decdf4dbf0 100644
--- a/client/src/templates/Challenges/components/completion-modal-body.tsx
+++ b/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 className='progress-bar-background'>
+          <div
+            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}%` }}