render table of data from line graph for screen readers

fixes CNVS-19344

- Add template for table.
- Update OutcomeSmmaryCollection::ResultCollection#scoresFor method to
  parse the datetime values from the API.
- Update OutcomeLineGraphView#render to render table of data in addition
  to the d3 driven line graph.
- Update OutconeLineGraph to accept a pre-parsed date.

test plan:
- Navigate to student outcome view at
  /courses/:course_id/grades/:user_id#tab-outcomes.
- Use the keyboard to highlight the `...` icon and hit enter to expand
  mastery info for an outcome.
- Use a screen reader to navigate content in the popover; note the table
  that is present to explain the information that is otherwise displayed
  just visually as a line graph. The data features two columns: the
  first is the data the assignment related to the outcome was submitted
  or the data the outcome assessment was made; the second is the score the
  user recieved.

Change-Id: Ibc4ac867c8376e1cb9022a06a311b95a2cf27178
Reviewed-on: https://gerrit.instructure.com/51088
Tested-by: Jenkins
QA-Review: Adam Stone <astone@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Aaron Cannon <acannon@instructure.com>

Author: John Corrigan

app/coffeescripts/collections/OutcomeSummaryCollection.coffee

@@ -8,7 +8,8 @@ define [
   'compiled/collections/PaginatedCollection'
   'compiled/collections/WrappedCollection'
   'compiled/util/natcompare'
-], ($, _, {Collection}, Section, Group, Outcome, PaginatedCollection, WrappedCollection, natcompare) ->
+  'timezone'
+], ($, _, {Collection}, Section, Group, Outcome, PaginatedCollection, WrappedCollection, natcompare, tz) ->
   class GroupCollection extends PaginatedCollection
     @optionProperty 'course_id'
     model: Group
@@ -33,7 +34,7 @@ define [
     scoresFor: (outcome) ->
       @chain().map((result) ->
         if result.get('links').learning_outcome == outcome.id
-          assessed_at: result.get('submitted_or_assessed_at')
+          assessed_at: tz.parse(result.get('submitted_or_assessed_at'))
           score: result.get('score')
       ).compact().value()
 

app/coffeescripts/views/grade_summary/OutcomeLineGraphView.coffee

@@ -2,8 +2,9 @@ define [
   'underscore'
   'Backbone'
   'vendor/d3.v3'
+  'jst/outcomes/accessibleLineGraph'
   'compiled/underscore-ext/sum'
-], (_, Backbone, d3) ->
+], (_, Backbone, d3, accessibleTemplate) ->
   # Trend class based on formulae found here:
   # http://classroom.synonym.com/calculate-trendline-2709.html
   class Trend
@@ -82,19 +83,27 @@ define [
         .append("svg")
           .attr("width", @width() + @margin.left + @margin.right)
           .attr("height", @height + @margin.top + @margin.bottom)
+          .attr("aria-hidden", true)
         .append("g")
           .attr("transform", "translate(#{@margin.left}, #{@margin.top})")
 
       @_appendAxes()
       @_appendLines()
 
+      @$('.screenreader-only').append(accessibleTemplate(@toJSON()))
+
       @
 
+    toJSON: ->
+      current_user_name: ENV.current_user.display_name
+      data: @data()
+      outcome_name: @model.get('friendly_name')
+
     # Data helpers
     data: ->
       @_data ?= _.chain(@model.get('scores'))
         .sortBy((score) =>
-          @parseDate(score.assessed_at)
+          score.assessed_at
         ).last(@limit)
         .map((score, i) =>
           x: i
@@ -105,9 +114,6 @@ define [
     masteryPercentage: ->
       (@model.get('mastery_points') / @model.get('points_possible')) * 100
 
-    parseDate: (date) ->
-      d3.time.format(@timeFormat).parse(date)
-
     percentageFor: (score) ->
       ((score / @model.get('points_possible')) * 100)
 
@@ -181,8 +187,8 @@ define [
       @dateGuides = d3.svg.axis()
         .scale(@xTimeScale)
         .tickValues([
-          @parseDate(_.first(@data()).date)
-          @parseDate(_.last(@data()).date)
+          _.first(@data()).date
+          _.last(@data()).date
         ])
         .tickFormat((d) -> d3.time.format("%m/%d")(d))
       @yAxis = d3.svg.axis()
@@ -219,8 +225,8 @@ define [
       @xTimeScale = d3.time.scale()
         .range([0, @xTimeScaleWidth()])
         .domain([
-          @parseDate(_.first(@data()).date)
-          @parseDate(_.last(@data()).date)
+          _.first(@data()).date
+          _.last(@data()).date
         ])
       @y = d3.scale.linear()
         .range([@height, @margin.bottom])

app/views/jst/outcomes/accessibleLineGraph.handlebars

@@ -0,0 +1,17 @@
+<table>
+  <caption>
+    {{#t}}
+      The most recent scores for user {{ current_user_name }} and outcome {{ outcome_name }}.
+    {{/t}}
+  </caption>
+  <tr>
+    <th scope="col">Date</th>
+    <th scope="col">Score</th>
+  </tr>
+  {{#each data}}
+    <tr>
+      <td scope="row">{{ tTimeToString (fudge date) "medium" }}</td>
+      <td>{{ y }}</td>
+    </tr>
+  {{/each}}
+</table>

app/views/jst/outcomes/outcomePopover.handlebars

@@ -1,5 +1,7 @@
 <div class="outcome-details{{#if dialog}}-dialog{{/if}}">
-  <div class="line-graph"></div>
+  <div class="line-graph">
+    <div class="screenreader-only"></div>
+  </div>
   <div class="head-content" tabindex="0">
     {{#if path}}
     <div class="title">{{path}}</div>

spec/coffeescripts/views/grade_summary/OutcomeLineGraphViewSpec.coffee

@@ -0,0 +1,45 @@
+define [
+  'underscore'
+  'compiled/models/grade_summary/Outcome'
+  'compiled/views/grade_summary/OutcomeLineGraphView'
+  'timezone'
+  'helpers/fakeENV'
+], (_, Outcome, OutcomeLineGraphView, tz, fakeENV) ->
+
+  module 'OutcomeLineGraphViewSpec',
+    setup: ->
+      fakeENV.setup()
+      ENV.current_user = {display_name: 'Student One'}
+
+      @outcomeLineGraphView = new OutcomeLineGraphView({
+        el: $('<div class="line-graph"></div>')[0]
+        model: new Outcome(
+          friendly_name: 'Friendly Outcome Name'
+          scores: []
+        )
+      })
+      @scores = [{
+        assessed_at: tz.parse('2015-02-01T12:30:40Z')
+        score:5
+      }, {
+        assessed_at: tz.parse('2015-02-02T12:30:40Z')
+        score:1
+      }, {
+        assessed_at: tz.parse('2015-02-03T12:30:40Z')
+        score:2
+      }]
+
+    teardown: ->
+      fakeENV.teardown()
+
+  test 'render', ->
+    ok @outcomeLineGraphView.render()
+    ok _.isUndefined(@outcomeLineGraphView.svg),
+      'should not render svg if no scores are present'
+
+    ok @outcomeLineGraphView.model.set(scores: @scores)
+    ok @outcomeLineGraphView.render()
+    ok !_.isUndefined(@outcomeLineGraphView.svg),
+      'should render svg if scores are present'
+    ok @outcomeLineGraphView.$('.screenreader-only'),
+      'should render table of data for screen reader'