AN-8408 Upgrade backgrid to 0.3.8: table headers are buttons (#651)

* Upgrade backgrid to 0.3.8, headers are buttons

* Address PR comments

analytics_dashboard/static/apps/components/generic-list/list/templates/base-header-cell.underscore

-<a href="#">
+<button>
   <%- label %>&nbsp;<span class="fa fa-sort" aria-hidden="true"></span>
   <span class="sr-only sr-sorting-text"></span>
-</a>
+</button>

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

@@ -170,7 +170,7 @@ define(function(require) {
                 getSortingHeaderLink;
 
             getSortingHeaderLink = function(headerClass) {
-                return $('th.' + headerClass + ' a');
+                return $('th.' + headerClass + ' button');
             };
 
             clickSortingHeader = function(headerClass) {

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

@@ -305,7 +305,7 @@ define(function(require) {
             var clickSortingHeader, executeSortTest, expectSortCalled, getSortingHeaderLink;
 
             getSortingHeaderLink = function(headerClass) {
-                return $('th.' + headerClass + ' a');
+                return $('th.' + headerClass + ' button');
             };
 
             clickSortingHeader = function(headerClass) {
@@ -1028,13 +1028,16 @@ define(function(require) {
                         collectionOptions: {parse: true}
                     }),
                     screenReaderTextSelector = '.sr-sorting-text',
-                    sortColumnSelector = '.username.sortable';
+                    sortColumnSelector = 'th.username.sortable button';
                 rosterView.$('th').each(function(_index, th) {
                     expect($(th).find(screenReaderTextSelector)).toHaveText('click to sort');
                 });
-                rosterView.$(sortColumnSelector + ' > a').click();
+                rosterView.$(sortColumnSelector).click();
+                getLastRequest().respond(200, {}, JSON.stringify(getResponseBody(2, 2)));
                 expect(rosterView.$(sortColumnSelector).find(screenReaderTextSelector)).toHaveText('sort ascending');
-                rosterView.$(sortColumnSelector + ' > a').click();
+
+                rosterView.$(sortColumnSelector).click();
+                getLastRequest().respond(200, {}, JSON.stringify(getResponseBody(2, 2)));
                 expect(rosterView.$(sortColumnSelector).find(screenReaderTextSelector)).toHaveText('sort descending');
             });
 

analytics_dashboard/static/sass/_mixins.scss

@@ -79,9 +79,25 @@
 
     font-weight: 600;
 
-    a {
+    button {
       // update header colors
       color: $text-color;
+
+      // the following overrides the button styling with link styling
+      @extend a;
+      border: none;
+      background: none;
+      padding: 0;
+      text-align: left;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:focus {
+        text-decoration: underline;
+        outline: 1px black dotted;
+      }
     }
 
   }

bower.json

@@ -31,10 +31,10 @@
     "edx-ui-toolkit": "edx/edx-ui-toolkit#29759050aff2f4f3cb6921432855ad057bd69bb1",
     "marionette": "~2.4.4",
     "uri.js": "1.17",
-    "backgrid": "0.3.7",
+    "backgrid": "0.3.8",
     "backgrid-moment-cell": "^0.3.8",
-    "backgrid-paginator": "^0.3.5",
-    "backgrid-filter": "^0.3.5",
+    "backgrid-paginator": "^0.3.9",
+    "backgrid-filter": "^0.3.7",
     "text": "^2.0.14",
     "axe-core": "^1.1.1",
     "nprogress": "^0.2.0",