From 76f3ca8655de5a1bdbe8451f8c343ac380a5b672 Mon Sep 17 00:00:00 2001
From: muzaffaryousaf <muzaffar.yousaf@arbisoft.com>
Date: Mon, 17 Aug 2015 15:56:58 +0500
Subject: [PATCH] Accessibility fixes for team profile page.

TNL-1930
---
 .../static/teams/js/spec/views/team_profile_spec.js    |  5 ++++-
 .../teams/static/teams/js/views/team_profile.js        |  4 ++++
 .../teams/static/teams/js/views/teams_tab.js           | 10 +++++++++-
 .../static/teams/templates/team-profile.underscore     |  6 ++++--
 lms/static/sass/views/_teams.scss                      |  6 +++---
 lms/templates/components/header/header.underscore      |  1 +
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js
index 4f97096113..e0d48e0ebb 100644
--- a/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js
+++ b/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(
diff --git a/lms/djangoapps/teams/static/teams/js/views/team_profile.js b/lms/djangoapps/teams/static/teams/js/views/team_profile.js
index 8184283dec..8947f42f48 100644
--- a/lms/djangoapps/teams/static/teams/js/views/team_profile.js
+++ b/lms/djangoapps/teams/static/teams/js/views/team_profile.js
@@ -22,6 +22,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);
@@ -42,6 +43,7 @@
                         membershipText: TeamUtils.teamCapacityText(memberships.length, this.maxTeamSize),
                         isMember: isMember,
                         hasCapacity: memberships.length < this.maxTeamSize,
+                        hasMembers: memberships.length >= 1
 
                     }));
                     this.discussionView = new TeamDiscussionView({
@@ -50,6 +52,8 @@
                     this.discussionView.render();
 
                     this.renderTeamMembers();
+
+                    this.setFocusToHeaderFunc();
                     return this;
                 },
 
diff --git a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
index d8d56374c4..704a967b6d 100644
--- a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
+++ b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
@@ -282,6 +282,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.
                  */
@@ -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,
diff --git a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore b/lms/djangoapps/teams/static/teams/templates/team-profile.underscore
index da9d5853d2..77f26fd21a 100644
--- a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore
+++ b/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>
 
diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss
index c19314f2be..53140ecd7d 100644
--- a/lms/static/sass/views/_teams.scss
+++ b/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);
diff --git a/lms/templates/components/header/header.underscore b/lms/templates/components/header/header.underscore
index b8de6f7c75..5fd91299da 100644
--- a/lms/templates/components/header/header.underscore
+++ b/lms/templates/components/header/header.underscore
@@ -1,5 +1,6 @@
 <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) { %>