fix accessibility issues

report challenges' completion state and remove <code> tag in test suite

packages/learn/src/templates/Challenges/components/Test-Suite.js

@@ -13,6 +13,7 @@ const propTypes = {
 
 function getAccessibleText(err, pass, text) {
   let accessibleText = 'Waiting';
+  const cleanText = text.replace(/<\/?code>/g, '');
 
   // Determine test status (i.e. icon)
   if (err) {
@@ -22,7 +23,7 @@ function getAccessibleText(err, pass, text) {
   }
 
   // Append the text itself
-  return accessibleText + ' - ' + text;
+  return accessibleText + ' - ' + cleanText;
 }
 
 function TestSuite({ tests }) {

packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 const propTypes = {};
 
 function GreenNotCompleted(props) {
   return (
+    <Fragment>
+      <span className='sr-only'>Not Passed</span>
       <svg
         height='50'
         viewBox='0 0 200 200'
@@ -26,6 +28,7 @@ function GreenNotCompleted(props) {
           />
         </g>
       </svg>
+    </Fragment>
   );
 }
 

packages/learn/src/templates/Challenges/components/icons/GreenPass.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 function GreenPass(props) {
   return (
+    <Fragment>
+      <span className='sr-only'>Passed</span>
       <svg
         height='50'
         viewBox='0 0 200 200'
@@ -47,6 +49,7 @@ function GreenPass(props) {
           />
         </g>
       </svg>
+    </Fragment>
   );
 }