add aria-labels to jobs-item

app/components/status-icon.coffee

@@ -0,0 +1,49 @@
+`import Ember from 'ember'`
+
+StatusIconComponent = Ember.Component.extend
+
+  tagName: 'span'
+  classNames: ['status-icon', 'icon']
+  classNameBindings: ['status']
+  attributeBindings: ['label:aria-label','label:title']
+
+  label: (->
+    "Job #{@get('status')}"
+  ).property('status')
+
+  hasPassed: (->
+    @get('status') == 'passed' || @get('status') == 'accepted'
+  ).property('status')
+
+  hasFailed: (->
+    @get('status') == 'failed' || @get('status') == 'rejected'
+  ).property('status')
+
+  hasErrored: (->
+    @get('status') == 'errored'
+  ).property('status')
+
+  wasCanceled: (->
+    @get('status') == 'canceled'
+  ).property('status')
+
+  isRunning: (->
+    @get('status') == 'started' ||
+    @get('status') == 'queued' ||
+    @get('status') == 'booting' ||
+    @get('status') == 'received' ||
+    @get('status') == 'created'
+  ).property('status')
+
+  isEmpty: (->
+    unless @get('status')
+      true
+    else
+      if @get('status') == ''
+        true
+      else
+        false
+
+  ).property('status')
+
+`export default StatusIconComponent`

app/components/status-icon.js

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

app/templates/components/jobs-item.hbs

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