Merge pull request #9775 from edx/clrux/ac-147

Addressing contrast and hover states for 'clear filters' button on the find courses page

lms/static/js/fixtures/discovery.html

@@ -2,7 +2,8 @@
   <div id="discovery-form" class="wrapper-search-context">
     <div id="discovery-message" class="search-status-label"></div>
     <form class="wrapper-search-input">
-      <input class="discovery-input" placeholder="Search for a course" type="text"/>
+      <label for="discovery-input" class="sr">Search for a course</label>
+      <input id="discovery-input" class="discovery-input" placeholder="Search for a course" type="text"/>
       <button type="submit" class="button postfix discovery-submit" aria-label="Search">
         <i class="icon fa fa-search" aria-hidden="true"></i>
         <div aria-live="polite" aria-relevant="all">

lms/static/sass/multicourse/_courses.scss

@@ -376,9 +376,14 @@ $facet-background-color: #007db8;
       @extend %t-strong;
       margin: ($baseline/2);
       width: auto;
-      color: $m-blue-d5;
+      color: $blue-d1; // WCAG 2.0 AA requirements
       text-align: center;
       text-transform: uppercase;
+
+      &:hover,
+      &:focus {
+        background: $gray-l4;
+      }
     }
 
     .flt-right {
@@ -509,7 +514,11 @@ $facet-background-color: #007db8;
         color: $facet-text-color;
 
         .count {
-          color: $gray-l4;
+          color: $gray;
+
+          .count-number {
+            display: none;
+          }
         }
 
         .count:before {

lms/templates/courseware/courses.html

@@ -35,7 +35,8 @@
     <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
       <div id="discovery-message" class="search-status-label"></div>
       <form class="wrapper-search-input">
-        <input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
+        <label for="discovery-input" class="sr">${_('Search for a course')}</label>
+        <input id="discovery-input" class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
         <button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
           <i class="icon fa fa-search" aria-hidden="true"></i>
           <div aria-live="polite" aria-relevant="all">

lms/templates/discovery/facet_option.underscore

@@ -2,7 +2,7 @@
     <button data-facet="<%= facet %>" data-value="<%= term %>" data-text="<%= name %>" class="facet-option discovery-button <%= selected ? 'selected' : '' %>">
         <%= name %>
         <span class="count">
-            <%= count %>
+            <span class="count-number"><%= count %></span>
         </span>
     </button>
 </li>