From cd9af163f6986b5cb256c05c2c258f9df454988a Mon Sep 17 00:00:00 2001
From: Vicente Plata <xientyto@gmail.com>
Date: Sat, 12 Aug 2017 14:02:09 -0700
Subject: [PATCH] fix(challenges): Provide accessible test description and
 status

Closes #13013

fix(challenges): Fix undefined initial variable status
---
 common/app/routes/challenges/Test-Suite.jsx | 26 +++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/common/app/routes/challenges/Test-Suite.jsx b/common/app/routes/challenges/Test-Suite.jsx
index d11837d911..da7ad7e2c6 100644
--- a/common/app/routes/challenges/Test-Suite.jsx
+++ b/common/app/routes/challenges/Test-Suite.jsx
@@ -8,6 +8,20 @@ const propTypes = {
   tests: PropTypes.arrayOf(PropTypes.object)
 };
 
+function getAccessibleText(err, pass, text) {
+  let accessibleText = 'Waiting';
+
+  // Determine test status (i.e. icon)
+  if (err) {
+    accessibleText = 'Error';
+  } else if (pass) {
+    accessibleText = 'Pass';
+  }
+
+  // Append the text itself
+  return accessibleText + ' - ' + text;
+}
+
 export default class TestSuite extends PureComponent {
   renderTests(tests = []) {
     // err && pass > invalid state
@@ -22,14 +36,22 @@ export default class TestSuite extends PureComponent {
         'ion-refresh refresh-icon': !err && !pass
       });
       return (
-        <Row key={ text.slice(-6) + index }>
+        <Row
+          aria-label={ getAccessibleText(err, pass, text) }
+          key={ text.slice(-6) + index }
+          tabIndex='0'
+          >
           <Col
             className='text-center'
             xs={ 2 }
             >
-            <i className={ iconClass } />
+            <i
+              aria-hidden='true'
+              className={ iconClass }
+            />
           </Col>
           <Col
+            aria-hidden='true'
             className='test-output'
             dangerouslySetInnerHTML={{ __html: text }}
             xs={ 10 }