AN-8409 First column of tables should be <th> elements (#652)

* Set tagName of course id/name column cells to th

* Add scope="row" to th cells. Fix learner roster.

* Fix JS tests

* Refactor common code into a RowHeaderCell class

analytics_dashboard/static/apps/components/generic-list/list/views/row-header-cell.js

+/**
+ * Cell class which should be used to head a row of a backgrid table. This is an abstract class meant to be inherited,
+ * not used directly.
+ *
+ * The contents of the cell may combine many values from the model. The entire model, as JSON, is sent to the template
+ * during rendering.
+ */
+define(function(require) {
+    'use strict';
+
+    var Backgrid = require('backgrid'),
+
+        RowHeaderCell;
+
+    RowHeaderCell = Backgrid.Cell.extend({
+        tagName: 'th',
+        className: 'row-header-cell',  // override this in the subclass to give it a more specific class
+        template: undefined,  // subclass and define your own template with _.template(require('text!...underscore'))
+        render: function() {
+            this.$el.html(this.template(this.model.toJSON()));
+            this.$el.attr('scope', 'row');
+            return this;
+        }
+    });
+
+    return RowHeaderCell;
+});

analytics_dashboard/static/apps/course-list/list/views/course-id-and-name-cell.js

@@ -6,22 +6,18 @@ define(function(require) {
     'use strict';
 
     var _ = require('underscore'),
-        Backgrid = require('backgrid'),
 
+        RowHeaderCell = require('components/generic-list/list/views/row-header-cell'),
         courseIdAndNameCellTemplate = require('text!course-list/list/templates/course-id-and-name-cell.underscore'),
 
         CourseIdAndNameCell;
 
-    CourseIdAndNameCell = Backgrid.Cell.extend({
+    CourseIdAndNameCell = RowHeaderCell.extend({
         className: 'course-name-cell',
         template: _.template(courseIdAndNameCellTemplate),
         events: {
             click: 'emitTracking'
         },
-        render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
-            return this;
-        },
         emitTracking: function() {
             this.$el.find('a').trigger('clicked.tracking');
         }

analytics_dashboard/static/apps/course-list/list/views/spec/course-list-spec.js

@@ -82,9 +82,9 @@ define(function(require) {
             _.chain(_.zip(view.collection.models, view.$('tbody tr'))).each(function(courseAndTr) {
                 var course = courseAndTr[0],
                     tr = courseAndTr[1];
-                expect($(tr).find('td.course-name-cell .course-name')).toContainText(
+                expect($(tr).find('th.course-name-cell .course-name')).toContainText(
                     course.get('catalog_course_title'));
-                expect($(tr).find('td.course-name-cell .course-id')).toContainText(course.get('course_id'));
+                expect($(tr).find('th.course-name-cell .course-id')).toContainText(course.get('course_id'));
                 expect($(tr).find('td.start_date')).toContainText(
                     moment.utc(course.get('start_date').split('T')[0]).format('L'));
                 expect($(tr).find('td.end_date')).toContainText(
@@ -325,9 +325,13 @@ define(function(require) {
 
             it('all <th> elements have scope attributes', function() {
                 var view = getCourseListView();
-                view.$('th').each(function(_index, $th) {
+                view.$('thead th').each(function(_index, $th) {
                     expect($th).toHaveAttr('scope', 'col');
                 });
+
+                view.$('tbody th').each(function(_index, $th) {
+                    expect($th).toHaveAttr('scope', 'row');
+                });
             });
 
             it('all icons should be aria-hidden', function() {

analytics_dashboard/static/apps/learners/roster/views/name-username-cell.js

@@ -6,19 +6,15 @@ define(function(require) {
     'use strict';
 
     var _ = require('underscore'),
-        Backgrid = require('backgrid'),
 
+        RowHeaderCell = require('components/generic-list/list/views/row-header-cell'),
         nameUsernameCellTemplate = require('text!learners/roster/templates/name-username-cell.underscore'),
 
         NameAndUsernameCell;
 
-    NameAndUsernameCell = Backgrid.Cell.extend({
+    NameAndUsernameCell = RowHeaderCell.extend({
         className: 'learner-name-username-cell',
-        template: _.template(nameUsernameCellTemplate),
-        render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
-            return this;
-        }
+        template: _.template(nameUsernameCellTemplate)
     });
 
     return NameAndUsernameCell;

analytics_dashboard/static/apps/learners/roster/views/spec/roster-spec.js

@@ -137,8 +137,8 @@ define(function(require) {
             _.chain(_.zip(learners, rosterView.$('tbody tr'))).each(function(learnerAndTr) {
                 var learner = learnerAndTr[0],
                     tr = learnerAndTr[1];
-                expect($(tr).find('td.learner-name-username-cell .name')).toContainText(learner.name);
-                expect($(tr).find('td.learner-name-username-cell .username')).toContainText(learner.username);
+                expect($(tr).find('th.learner-name-username-cell .name')).toContainText(learner.name);
+                expect($(tr).find('th.learner-name-username-cell .username')).toContainText(learner.username);
                 expect($(tr).find('td.discussion_contributions'))
                     .toContainText(learner.engagements.discussion_contributions);
                 expect($(tr).find('td.problems_attempted'))
@@ -1017,9 +1017,13 @@ define(function(require) {
                     collectionResponse: getResponseBody(1, 1),
                     collectionOptions: {parse: true}
                 });
-                rosterView.$('th').each(function(_index, $th) {
+                rosterView.$('thead th').each(function(_index, $th) {
                     expect($th).toHaveAttr('scope', 'col');
                 });
+
+                rosterView.$('tbody th').each(function(_index, $th) {
+                    expect($th).toHaveAttr('scope', 'row');
+                });
             });
 
             it('all <th> elements have screen reader text', function() {
@@ -1029,7 +1033,7 @@ define(function(require) {
                     }),
                     screenReaderTextSelector = '.sr-sorting-text',
                     sortColumnSelector = 'th.username.sortable button';
-                rosterView.$('th').each(function(_index, th) {
+                rosterView.$('thead th').each(function(_index, th) {
                     expect($(th).find(screenReaderTextSelector)).toHaveText('click to sort');
                 });
                 rosterView.$(sortColumnSelector).click();

analytics_dashboard/static/sass/_developer.scss

@@ -805,6 +805,11 @@ body.view-dashboard {
 
   }
 
+  th.learner-name-username-cell {
+    // override the th styling with td styling
+    @extend td;
+    font-weight: normal;
+  }
 }
 
 // styles for the learner details summary
@@ -854,4 +859,10 @@ body.view-dashboard {
   .course-id {
     color: $edx-gray;
   }
+
+  th.course-name-cell {
+    // override the th styling with td styling
+    @extend td;
+    font-weight: normal;
+  }
 }

analytics_dashboard/static/sass/_mixins.scss

@@ -75,7 +75,7 @@
     padding-bottom: 5px;
   }
 
-  th {
+  thead tr th {
 
     font-weight: 600;