From c6c1e347d0fcf6a7d34e57fa402da1b2735395fc Mon Sep 17 00:00:00 2001
From: huyenltnguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Thu, 5 Jul 2018 22:27:00 +0700
Subject: [PATCH] fix accessibility issues

report challenges' completion state and remove <code> tag in test suite
---
 .../Challenges/components/Test-Suite.js       |  3 +-
 .../components/icons/GreenNotCompleted.js     | 49 +++++-----
 .../Challenges/components/icons/GreenPass.js  | 95 ++++++++++---------
 3 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/packages/learn/src/templates/Challenges/components/Test-Suite.js b/packages/learn/src/templates/Challenges/components/Test-Suite.js
index 10c360ce77..98e9045ec0 100644
--- a/packages/learn/src/templates/Challenges/components/Test-Suite.js
+++ b/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 }) {
diff --git a/packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js b/packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js
index fc248e85c3..baff59e0e4 100644
--- a/packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js
+++ b/packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js
@@ -1,31 +1,34 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 const propTypes = {};
 
 function GreenNotCompleted(props) {
   return (
-    <svg
-      height='50'
-      viewBox='0 0 200 200'
-      width='50'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-      >
-      <g>
-        <title>Not Passed</title>
-        <circle
-          cx='100'
-          cy='99'
-          fill='#FFFFFF'
-          r='95'
-          stroke='#006400'
-          strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
-          strokeWidth='5'
-        />
-      </g>
-    </svg>
+    <Fragment>
+      <span className='sr-only'>Not Passed</span>
+      <svg
+        height='50'
+        viewBox='0 0 200 200'
+        width='50'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+        >
+        <g>
+          <title>Not Passed</title>
+          <circle
+            cx='100'
+            cy='99'
+            fill='#FFFFFF'
+            r='95'
+            stroke='#006400'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            strokeWidth='5'
+          />
+        </g>
+      </svg>
+    </Fragment>
   );
 }
 
diff --git a/packages/learn/src/templates/Challenges/components/icons/GreenPass.js b/packages/learn/src/templates/Challenges/components/icons/GreenPass.js
index 440924b49a..6b5c74c547 100644
--- a/packages/learn/src/templates/Challenges/components/icons/GreenPass.js
+++ b/packages/learn/src/templates/Challenges/components/icons/GreenPass.js
@@ -1,52 +1,55 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 function GreenPass(props) {
   return (
-    <svg
-      height='50'
-      viewBox='0 0 200 200'
-      width='50'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-      >
-      <g>
-        <title>Passed</title>
-        <circle
-          cx='100'
-          cy='99'
-          fill='#006400'
-          r='95'
-          stroke='#006400'
-          strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
-        />
-        <rect
-          fill='#ffffff'
-          height='30'
-          stroke='#ffffff'
-          strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
-          transform='rotate(-45, 120, 106.321)'
-          width='128.85878'
-          x='55.57059'
-          y='91.32089'
-        />
-        <rect
-          fill='#ffffff'
-          height='30'
-          stroke='#ffffff'
-          strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
-          transform='rotate(45, 66.75, 123.75)'
-          width='80.66548'
-          x='26.41726'
-          y='108.75'
-        />
-      </g>
-    </svg>
+    <Fragment>
+      <span className='sr-only'>Passed</span>
+      <svg
+        height='50'
+        viewBox='0 0 200 200'
+        width='50'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+        >
+        <g>
+          <title>Passed</title>
+          <circle
+            cx='100'
+            cy='99'
+            fill='#006400'
+            r='95'
+            stroke='#006400'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+          />
+          <rect
+            fill='#ffffff'
+            height='30'
+            stroke='#ffffff'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(-45, 120, 106.321)'
+            width='128.85878'
+            x='55.57059'
+            y='91.32089'
+          />
+          <rect
+            fill='#ffffff'
+            height='30'
+            stroke='#ffffff'
+            strokeDasharray='null'
+            strokeLinecap='null'
+            strokeLinejoin='null'
+            transform='rotate(45, 66.75, 123.75)'
+            width='80.66548'
+            x='26.41726'
+            y='108.75'
+          />
+        </g>
+      </svg>
+    </Fragment>
   );
 }