Commit 90ab3342 by Tyler Hallada Committed by GitHub

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
parent 1e0960a8
<a href="#">
<button>
<%- label %>&nbsp;<span class="fa fa-sort" aria-hidden="true"></span>
<span class="sr-only sr-sorting-text"></span>
</a>
</button>
......@@ -170,7 +170,7 @@ define(function(require) {
getSortingHeaderLink;
getSortingHeaderLink = function(headerClass) {
return $('th.' + headerClass + ' a');
return $('th.' + headerClass + ' button');
};
clickSortingHeader = function(headerClass) {
......
......@@ -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');
});
......
......@@ -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;
}
}
}
......
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment