Merge pull request #9082 from edx/peter-fogg/team-list-accessibility

Give teams view error messages focus.

common/static/common/templates/components/paging-footer.underscore

@@ -3,7 +3,8 @@
     <div class="nav-item page">
         <div class="pagination-form">
             <label class="page-number-label" for="page-number-input"><%= gettext("Page number") %></label>
-            <input id="page-number-input" class="page-number-input" name="page-number" type="text" size="4" autocomplete="off" />
+            <input id="page-number-input" class="page-number-input" name="page-number" type="text" size="4" autocomplete="off" aria-describedby="page-number-input-helper"/>
+            <span class="sr field-helper" id="page-number-input-helper"><%= gettext("Enter the page number you'd like to quickly navigate to.") %></span>
         </div>
 
         <span class="current-page"><%= current_page %></span>

lms/djangoapps/teams/static/teams/js/spec/teams_tab_spec.js

@@ -16,6 +16,9 @@ define([
             },
             expectError = function (text) {
                 expect(teamsTabView.$('.warning').text()).toContain(text);
+            },
+            expectFocus = function (element) {
+                expect(element.focus).toHaveBeenCalled();
             };
 
         beforeEach(function () {
@@ -40,6 +43,7 @@ define([
                 course_id: 'test/course/id'
             }).render();
             Backbone.history.start();
+            spyOn($.fn, 'focus');
         });
 
         afterEach(function () {
@@ -58,17 +62,19 @@ define([
             expectContent('This is the new Teams tab.');
         });
 
-        it('displays an error message when trying to navigate to a nonexistent route', function () {
+        it('displays and focuses an error message when trying to navigate to a nonexistent route', function () {
             teamsTabView.router.navigate('test', {trigger: true});
             expectError('The page "test" could not be found.');
+            expectFocus(teamsTabView.$('.warning'));
         });
 
-        it('displays an error message when trying to navigate to a nonexistent topic', function () {
+        it('displays and focuses an error message when trying to navigate to a nonexistent topic', function () {
             var requests = AjaxHelpers.requests(this);
             teamsTabView.router.navigate('topics/test', {trigger: true});
             AjaxHelpers.expectRequest(requests, 'GET', 'api/topics/test,course_id', null);
             AjaxHelpers.respondWithError(requests, 404);
             expectError('The topic "test" could not be found.');
+            expectFocus(teamsTabView.$('.warning'));
         });
     });
 });

lms/djangoapps/teams/static/teams/js/views/teams_tab.js

@@ -255,6 +255,7 @@
                        var warningEl = this.$('.warning');
                        warningEl.find('.copy').html('<p>' + message + '</p');
                        warningEl.toggleClass('is-hidden', false);
+                       warningEl.focus();
                    },
 
                    hideWarning: function () {

lms/djangoapps/teams/static/teams/templates/teams_tab.underscore

-<div class="wrapper-msg is-incontext urgency-low warning is-hidden">
+<div class="wrapper-msg is-incontext urgency-low warning is-hidden" tabindex="-1">
     <div class="msg">
         <div class="msg-content">
             <div class="copy">