fix(challenges): Provide accessible test description and status
Closes #13013 fix(challenges): Fix undefined initial variable status
This commit is contained in:
		@@ -8,6 +8,20 @@ const propTypes = {
 | 
				
			|||||||
  tests: PropTypes.arrayOf(PropTypes.object)
 | 
					  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 {
 | 
					export default class TestSuite extends PureComponent {
 | 
				
			||||||
  renderTests(tests = []) {
 | 
					  renderTests(tests = []) {
 | 
				
			||||||
    // err && pass > invalid state
 | 
					    // err && pass > invalid state
 | 
				
			||||||
@@ -22,14 +36,22 @@ export default class TestSuite extends PureComponent {
 | 
				
			|||||||
        'ion-refresh refresh-icon': !err && !pass
 | 
					        'ion-refresh refresh-icon': !err && !pass
 | 
				
			||||||
      });
 | 
					      });
 | 
				
			||||||
      return (
 | 
					      return (
 | 
				
			||||||
        <Row key={ text.slice(-6) + index }>
 | 
					        <Row
 | 
				
			||||||
 | 
					          aria-label={ getAccessibleText(err, pass, text) }
 | 
				
			||||||
 | 
					          key={ text.slice(-6) + index }
 | 
				
			||||||
 | 
					          tabIndex='0'
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
          <Col
 | 
					          <Col
 | 
				
			||||||
            className='text-center'
 | 
					            className='text-center'
 | 
				
			||||||
            xs={ 2 }
 | 
					            xs={ 2 }
 | 
				
			||||||
            >
 | 
					            >
 | 
				
			||||||
            <i className={ iconClass } />
 | 
					            <i
 | 
				
			||||||
 | 
					              aria-hidden='true'
 | 
				
			||||||
 | 
					              className={ iconClass }
 | 
				
			||||||
 | 
					            />
 | 
				
			||||||
          </Col>
 | 
					          </Col>
 | 
				
			||||||
          <Col
 | 
					          <Col
 | 
				
			||||||
 | 
					            aria-hidden='true'
 | 
				
			||||||
            className='test-output'
 | 
					            className='test-output'
 | 
				
			||||||
            dangerouslySetInnerHTML={{ __html: text }}
 | 
					            dangerouslySetInnerHTML={{ __html: text }}
 | 
				
			||||||
            xs={ 10 }
 | 
					            xs={ 10 }
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user