From f5211f1fdc673170d3e7dc1763bc308d4b9ac09c Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Mon, 4 Jan 2016 13:59:44 +0100
Subject: [PATCH 1/2] add aria-labels to jobs-item
---
app/components/status-icon.coffee | 49 ++++++++++++++++++++++++++
app/components/status-icon.js | 5 +++
app/templates/components/jobs-item.hbs | 22 ++++++------
3 files changed, 65 insertions(+), 11 deletions(-)
create mode 100644 app/components/status-icon.coffee
diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee
new file mode 100644
index 00000000..11e43d25
--- /dev/null
+++ b/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`
diff --git a/app/components/status-icon.js b/app/components/status-icon.js
index 6fee56d5..ea01d9d6 100644
--- a/app/components/status-icon.js
+++ b/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';
diff --git a/app/templates/components/jobs-item.hbs b/app/templates/components/jobs-item.hbs
index b7d364bb..f36325a4 100644
--- a/app/templates/components/jobs-item.hbs
+++ b/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}}
From 4edd1feaad34aebeab2b7eca9e6f71b983fd97fd Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Tue, 5 Jan 2016 12:57:04 +0100
Subject: [PATCH 2/2] remove coffee file
---
app/components/status-icon.coffee | 49 -------------------------------
app/components/status-icon.js | 4 +--
2 files changed, 2 insertions(+), 51 deletions(-)
delete mode 100644 app/components/status-icon.coffee
diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee
deleted file mode 100644
index 11e43d25..00000000
--- a/app/components/status-icon.coffee
+++ /dev/null
@@ -1,49 +0,0 @@
-`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`
diff --git a/app/components/status-icon.js b/app/components/status-icon.js
index ea01d9d6..846c51c7 100644
--- a/app/components/status-icon.js
+++ b/app/components/status-icon.js
@@ -4,10 +4,10 @@ export default Ember.Component.extend({
tagName: 'span',
classNames: ['status-icon', 'icon'],
classNameBindings: ['status'],
- attributeBindings: ['label:aria-label', 'label:title']
+ attributeBindings: ['label:aria-label', 'label:title'],
label: function() {
- return 'Job ' + this.get('status')
+ return 'Job ' + this.get('status');
}.property('status'),
hasPassed: function() {