suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #424 from travis-ci/lp-accessible-jobslist

Browse Source 
add aria-labels to jobs-item
This commit is contained in:
Piotr Sarnacki 2016-01-05 14:51:21 +01:00
commit 01bcfb8a8c
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/status-icon.js
View File

@ -4,6 +4,11 @@ export default Ember.Component.extend({
tagName: 'span', tagName: 'span',
classNames: ['status-icon', 'icon'], classNames: ['status-icon', 'icon'],
classNameBindings: ['status'], classNameBindings: ['status'],
attributeBindings: ['label:aria-label', 'label:title'],
label: function() {
return 'Job ' + this.get('status');
}.property('status'),
hasPassed: function() { hasPassed: function() {
return this.get('status') === 'passed' || this.get('status') === 'accepted'; return this.get('status') === 'passed' || this.get('status') === 'accepted';

22
app/templates/components/jobs-item.hbs
View File

@ -4,36 +4,36 @@
</div> </div>
<div class="job-number {{job.state}}"> <div class="job-number {{job.state}}">
<span class="icon-hash" aria-hidden="true"></span> <span class="icon-hash" aria-hidden="trigger"></span>
<span class="label-align">{{job.number}}</span> <span class="label-align" aria-label="Job number">{{job.number}}</span>
</div> </div>
<div class="job-os {{job.config.os}} tooltip"> <div class="job-os {{job.config.os}} tooltip">
{{#if job.config.os}} {{#if job.config.os}}
<span class="icon tooltip-trigger">{{job.config.os}}</span> <span class="icon tooltip-trigger" aria-label="Operating System">{{job.config.os}}</span>
<div class="tooltip-bubble" aria-hidden="true">{{job.config.os}}</div> <div class="tooltip-bubble" aria-hidden="true">{{job.config.os}}</div>
{{/if}} {{/if}}
</div> </div>
<div class="job-lang"> <div class="job-lang">
<span class="icon-lang"></span> <span class="icon-lang" aria-hidden="true"></span>
<span class="label-align">{{#if languages}}{{languages}}{{else}}no language set{{/if}}</span> <span class="label-align" aria-label="Language">{{#if languages}}{{languages}}{{else}}no language set{{/if}}</span>
</div> </div>
{{#if environment}} {{#if environment}}
<div class="job-env"> <div class="job-env">
<span class="icon-env"></span> <span class="icon-env" aria-hidden="true"></span>
<span class="label-align">{{environment}}</span> <span class="label-align" aria-label="Environment variables">{{environment}}</span>
</div> </div>
{{else}} {{else}}
<div class="job-env is-empty"> <div class="job-env is-empty">
<span class="icon-env"></span> <span class="icon-env" aria-hidden="true"></span>
<span class="label-align">no environment variables set</span> <span class="label-align" aria-label="Environment variables">no environment variables set</span>
</div> </div>
{{/if}} {{/if}}
<div class="job-duration" title="Started {{pretty-date job.startedAt}}"> <div class="job-duration" title="Started {{pretty-date job.startedAt}}">
<span class="icon-clock"></span> <span class="icon-clock" aria-hidden="true"></span>
<span class="label-align">{{format-duration job.duration}}</span> <span class="label-align" aria-label="Job duration">{{format-duration job.duration}}</span>
</div> </div>
{{/link-to}} {{/link-to}}