Merge pull request #9343 from edx/muzaffar/tnl1930-teams-accessibility

Muzaffar/tnl1930 teams accessibility

lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js

@@ -55,7 +55,10 @@ define([
                     ['en', 'English'],
                     ['fr', 'French']
                 ],
-                teamMembershipDetailUrl: 'api/team/v0/team_membership/team_id,bilbo'
+                teamMembershipDetailUrl: 'api/team/v0/team_membership/team_id,bilbo',
+                setFocusToHeaderFunc: function() {
+                    $('.teams-content').focus();
+                }
             });
             profileView.render();
             AjaxHelpers.expectRequest(

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

@@ -23,6 +23,7 @@
                     this.requestUsername = options.requestUsername;
                     this.isPrivileged = options.isPrivileged;
                     this.teamMembershipDetailUrl = options.teamMembershipDetailUrl;
+                    this.setFocusToHeaderFunc = options.setFocusToHeaderFunc;
 
                     this.countries = TeamUtils.selectorOptionsArrayToHashWithBlank(options.countries);
                     this.languages = TeamUtils.selectorOptionsArrayToHashWithBlank(options.languages);
@@ -43,6 +44,7 @@
                         membershipText: TeamUtils.teamCapacityText(memberships.length, this.maxTeamSize),
                         isMember: isMember,
                         hasCapacity: memberships.length < this.maxTeamSize,
+                        hasMembers: memberships.length >= 1
 
                     }));
                     this.discussionView = new TeamDiscussionView({
@@ -51,6 +53,8 @@
                     this.discussionView.render();
 
                     this.renderTeamMembers();
+
+                    this.setFocusToHeaderFunc();
                     return this;
                 },
 

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

@@ -283,6 +283,13 @@
                 },
 
                 /**
+                 * Sets focus to teams header.
+                 */
+                setFocusToHeader: function() {
+                    $('.page-header-main .sr-is-focusable').focus();
+                },
+
+                /**
                  * Return a promise for the team view for the given team ID.
                  */
                 getBrowseTeamView: function (topicID, teamID) {
@@ -301,7 +308,8 @@
                                 requestUsername: self.userInfo.username,
                                 countries: self.countries,
                                 languages: self.languages,
-                                teamMembershipDetailUrl: self.teamMembershipDetailUrl
+                                teamMembershipDetailUrl: self.teamMembershipDetailUrl,
+                                setFocusToHeaderFunc: self.setFocusToHeader
                             });
                             var teamJoinView = new TeamJoinView({
                                 teamEvents: self.teamEvents,

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -5,7 +5,7 @@
                 data-user-create-comment="<%= !readOnly %>"
                 data-user-create-subcomment="<%= !readOnly %>">
             <% if ( !readOnly) { %>
-                <a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span><%= gettext("New Post") %></a>
+                <button type="button" class="btn new-post-btn"><i class="icon fa fa-edit new-post-icon" aria-hidden="true"></i><%= gettext("New Post") %></button>
             <% } %>
         </div>
     </div>
@@ -18,7 +18,9 @@
             </div>
         <% } %>
         <div class="team-members">
-            <span class="sr"><%- gettext("Team member profiles") %></span>
+            <% if (hasMembers) { %>
+                <span class="sr"><%- gettext("Team member profiles") %></span>
+            <% } %>
             <div class="members-info"></div>
         </div>
 

lms/static/sass/views/_teams.scss

@@ -243,13 +243,13 @@
       @include clearfix();
       @extend %t-copy-sub1;
       padding: ($baseline/2) $baseline;
-      background-color: $gray-l5;
+      background-color: $gray-l6;
       color: $gray;
 
       .meta-detail {
         margin-top: ($baseline/4);
         @include margin-right ($baseline*.75);
-        color: $gray;
+        color: $gray-d1;
 
         .icon {
           @include margin-right ($baseline/4);
@@ -372,7 +372,7 @@
       margin-bottom: $baseline;
 
       @extend %t-copy-sub1;
-      color: $gray-l1;
+      color: $gray;
 
       div, .team-detail-header {
         margin-bottom: ($baseline/4);

lms/templates/components/header/header.underscore

 <header class="page-header has-secondary">
     <div class="page-header-main">
+        <div class="sr-is-focusable" tabindex="-1"></div>
         <% if (breadcrumbs !== null && breadcrumbs.length > 0) { %>
             <nav class="breadcrumbs" aria-label="<%- nav_aria_label %>">
             <% _.each(breadcrumbs, function (breadcrumb) { %>