From cdb1831ceb1405ed1fdcc7b47a4a2cd54138938d Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 24 Sep 2018 21:19:18 -0700
Subject: [PATCH] Add a11y features to the line-chart component

- Treat it as an image
- Add a title and a description
- Hide the axes, just in case
---
 ui/app/components/line-chart.js            | 19 +++++++++++++++++++
 ui/app/templates/components/line-chart.hbs | 15 ++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index e8846026d..52c5de964 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -37,6 +37,9 @@ export default Component.extend(WindowResizable, {
   timeseries: false,
   chartClass: 'is-primary',
 
+  title: 'Line Chart',
+  description: null,
+
   // Private Properties
 
   width: 0,
@@ -96,6 +99,22 @@ export default Component.extend(WindowResizable, {
     return scale;
   }),
 
+  xRange: computed('data.[]', 'xFormat', 'xProp', 'timeseries', function() {
+    const { xProp, timeseries, data } = this.getProperties('xProp', 'timeseries', 'data');
+    const range = d3Array.extent(data, d => d[xProp]);
+    const formatter = this.xFormat(timeseries);
+
+    return range.map(formatter);
+  }),
+
+  yRange: computed('data.[]', 'yFormat', 'yProp', function() {
+    const yProp = this.get('yProp');
+    const range = d3Array.extent(this.get('data'), d => d[yProp]);
+    const formatter = this.yFormat();
+
+    return range.map(formatter);
+  }),
+
   yScale: computed('data.[]', 'yProp', 'xAxisOffset', function() {
     const yProp = this.get('yProp');
     let max = d3Array.max(this.get('data'), d => d[yProp]) || 1;
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index eb993918d..77861245b 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -1,4 +1,13 @@
-<svg data-test-line-chart>
+<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" elementId}} {{concat "desc-" elementId}}">
+  <title id="{{concat "title-" elementId}}">{{title}}</title>
+  <description id="{{concat "desc-" elementId}}">
+    {{#if description}}
+      {{description}}
+    {{else}}
+      X-axis values range from {{xRange.firstObject}} to {{xRange.lastObject}},
+      and Y-axis values range from {{yRange.firstObject}} to {{yRange.lastObject}}.
+    {{/if}}
+  </description>
   <defs>
     <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
       <stop class="start" offset="0%" />
@@ -14,8 +23,8 @@
     <rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
     <rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
   </g>
-  <g class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
-  <g class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
+  <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
+  <g aria-hidden="true" class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
 </svg>
 <div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
   <p>