From e3035a8fab5d3736995b34cf2c33df219b7e97cb Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Tue, 15 Sep 2015 15:55:47 -0400
Subject: [PATCH] LMS: a11y contrast fixes for find course page

---
 lms/static/js/fixtures/discovery.html           |  3 ++-
 lms/static/sass/multicourse/_courses.scss       | 13 +++++++++++--
 lms/templates/courseware/courses.html           |  3 ++-
 lms/templates/discovery/facet_option.underscore |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/lms/static/js/fixtures/discovery.html b/lms/static/js/fixtures/discovery.html
index e21bc04ae9..8e3d4071fd 100644
--- a/lms/static/js/fixtures/discovery.html
+++ b/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">
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 736d0280d5..57f47da9e0 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/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 {
diff --git a/lms/templates/courseware/courses.html b/lms/templates/courseware/courses.html
index ef7f1b55ac..9b8f4046ca 100644
--- a/lms/templates/courseware/courses.html
+++ b/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">
diff --git a/lms/templates/discovery/facet_option.underscore b/lms/templates/discovery/facet_option.underscore
index dd8481fc3d..6706dd365a 100644
--- a/lms/templates/discovery/facet_option.underscore
+++ b/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>