Various accessibility fixes for Teams.

Update teams breadcrumb aria-label, make team membership display as a
<ul>, fix contrast issues, and remove an extraneous angle bracket.

common/static/common/templates/components/search-field.underscore

 <div class="page-header-search wrapper-search-<%= type %>">
     <form class="search-form">
         <div class="wrapper-search-input">
-            <label for="search-<%= type %>" class="search-label">><%- searchLabel %></label>
+            <label for="search-<%= type %>" class="search-label"><%- searchLabel %></label>
             <input id="search-<%= type %>" class="search-field" type="text" value="<%- searchString %>" placeholder="<%- searchLabel %>" />
             <button type="button" class="action action-clear <%= searchLabel ? '' : 'is-hidden' %>" aria-label="<%- gettext('Clear search') %>">
                 <i class="icon fa fa-times-circle" aria-hidden="true"></i><span class="sr"><%- gettext('Search') %></span>

common/test/acceptance/pages/lms/teams.py

@@ -508,7 +508,7 @@ class TeamPage(CoursePage, PaginatedUIMixin, BreadcrumbsMixin):
 
     def click_first_profile_image(self):
         """Clicks on first team member's profile image"""
-        self.q(css='.page-content-secondary .members-info > .team-member').first.click()
+        self.q(css='.page-content-secondary .members-info .team-member').first.click()
 
     @property
     def first_member_username(self):

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

@@ -31,7 +31,7 @@
                   TeamMembersEditView, TeamProfileHeaderActionsView, TeamUtils, InstructorToolsView, teamsTemplate) {
             var TeamsHeaderModel = HeaderModel.extend({
                 initialize: function () {
-                    _.extend(this.defaults, {nav_aria_label: gettext('teams')});
+                    _.extend(this.defaults, {nav_aria_label: gettext('Topics')});
                     HeaderModel.prototype.initialize.call(this);
                 }
             });

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

-<span class="team-member">
+<li>
+  <span class="team-member">
     <a class="member-profile" href="<%= memberProfileUrl %>">
-        <p class="tooltip-custom"><%= username %></p>
-        <img class="image-url" src="<%= imageUrl %>" alt="profile page" />
+      <p class="tooltip-custom"><%= username %></p>
+      <img class="image-url" src="<%= imageUrl %>" alt="profile page" />
     </a>
-</span>
+  </span>
+</li>

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

@@ -21,7 +21,7 @@
             <% if (hasMembers) { %>
                 <span class="sr"><%- gettext("Team member profiles") %></span>
             <% } %>
-            <div class="members-info"></div>
+            <ul class="members-info"></ul>
         </div>
 
         <div class="team-capacity">

lms/static/sass/_developer.scss

@@ -275,6 +275,14 @@
     }
   }
 
+  .members-info {
+    margin: 0;
+    padding: 0;
+    li {
+      display: inline;
+    }
+  }
+
   .edit-members {
     @extend %ui-no-list;
 

lms/static/sass/views/_teams.scss

@@ -175,7 +175,7 @@
   .listing-tools {
     @extend %t-copy-sub1;
     margin: ($baseline/10) $baseline;
-    color: $gray-l1;
+    color: $gray-d1;
 
     label { // override
       color: inherit;
@@ -716,11 +716,11 @@
 
     .u-field.error {
       input, textarea {
-        border-color: $error-red;
+        border-color: $danger-red;
       }
 
       .u-field-message-help, .u-field-description-message {
-        color: $error-red !important;
+        color: $danger-red !important;
       }
     }