From b757225c4b8dbfe29313df8649d4e08ed9e5a21d Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Mon, 10 Aug 2015 15:49:35 -0400
Subject: [PATCH 1/2] Fixing remaining contrast issue

---
 .../sass/course/modules/_calculator.scss      | 23 ++++++++++++-------
 .../calculator/toggle_calculator.html         |  4 ++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 8ed0fcc2b4..44224849b9 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -1,7 +1,7 @@
 // LMS -- modules -- calculator
 // ====================
 
-div.calc-main {
+.calc-main {
   @extend %ui-print-excluded;
 
   bottom: -126px;
@@ -29,7 +29,7 @@ div.calc-main {
     width: ($baseline*0.75);
 
     &:hover, &:focus {
-      background-color: $gray-d1;
+      background: url("../images/calc-icon.png") $gray-d1 no-repeat center;
     }
 
     &.closed {
@@ -44,7 +44,7 @@ div.calc-main {
     }
   }
 
-  div#calculator_wrapper {
+  #calculator_wrapper {
     clear: both;
     position: relative;
     top: -36px;
@@ -72,7 +72,7 @@ div.calc-main {
         color: $white;
       }
 
-      button#calculator_button {
+      #calculator_button {
         background: #111;
         border: 1px solid $black;
         border-radius: 0;
@@ -99,7 +99,7 @@ div.calc-main {
         }
       }
 
-      input#calculator_output {
+      #calculator_output {
         background: #111;
         border: 0;
         box-shadow: none;
@@ -114,14 +114,19 @@ div.calc-main {
         width: flex-grid(4);
       }
 
-      div.input-wrapper {
+      .input-wrapper {
         @extend .clearfix;
         float: left;
         margin: 0;
         position: relative;
         width: flex-grid(7.5);
 
-        input#calculator_input {
+        .label-calc-input {
+          background: $black;
+          color: $white;
+        }
+
+        #calculator_input {
           border: none;
           box-shadow: none;
           @include box-sizing(border-box);
@@ -129,13 +134,15 @@ div.calc-main {
           padding: 10px;
           -webkit-appearance: none;
           width: 100%;
+          background: $black;
+          color: $white;
 
           &:focus {
             border: none;
           }
         }
 
-        div.help-wrapper {
+        .help-wrapper {
           position: absolute;
           right: 0;
           top: 0;
diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html
index d1d88d7b89..3a7e10d040 100644
--- a/lms/templates/calculator/toggle_calculator.html
+++ b/lms/templates/calculator/toggle_calculator.html
@@ -11,7 +11,7 @@ from django.core.urlresolvers import reverse
   <div id="calculator_wrapper">
     <form id="calculator">
       <div class="input-wrapper">
-        <label for="calculator_input" class="sr">${_('Calculator Input')}</label>
+        <label for="calculator_input" class="label-calc-input sr">${_('Calculator Input')}</label>
         <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
 
         <div class="help-wrapper">
@@ -135,7 +135,7 @@ from django.core.urlresolvers import reverse
         </div>
       </div>
 
-      <button id="calculator_button">=<span class="calc-button-label sr">${_('Calculate')}</span></button>
+      <input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}">
       <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
       <input type="text" id="calculator_output" readonly />
     </form>

From 644d20ec991ef29dc9a571af9bff66d0e06fd5f7 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Thu, 13 Aug 2015 15:07:13 -0400
Subject: [PATCH 2/2] Addressing PR feedback

---
 lms/static/sass/course/modules/_calculator.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 44224849b9..ee8e139526 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -90,7 +90,7 @@
         width: flex-grid(.5) + flex-gutter();
 
         &:hover, &:focus {
-          color: #333;
+          color: $link-color;
         }
 
         .calc-button-label {
@@ -134,8 +134,6 @@
           padding: 10px;
           -webkit-appearance: none;
           width: 100%;
-          background: $black;
-          color: $white;
 
           &:focus {
             border: none;