fix(challenges): Provide accessible test description and status

Closes #13013

fix(challenges): Fix undefined initial variable status
pull/15758/head
Vicente Plata 2017-08-12 14:02:09 -07:00
parent 7fbce94845
commit cd9af163f6
1 changed files with 24 additions and 2 deletions

View File

@ -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 }