From 45c1f28d5f79f065c5f8cfd46f982f2a9dc7ef28 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Mon, 6 Jul 2015 12:04:13 -0400
Subject: [PATCH 1/2] Fixing aria values and contrast for accessibility

---
 .../sass/course/modules/_calculator.scss      | 41 ++++++++++++++++---
 .../calculator/toggle_calculator.html         |  2 +-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 24d6aff666..5da357037a 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -37,14 +37,20 @@ div.calc-main {
       background-color: $black;
       top: -36px;
     }
+
+    .utility-control-label {
+      background: $black;
+      color: $white;
+    }
   }
 
   div#calculator_wrapper {
-    background: $black;
     clear: both;
-    max-height: 90px;
     position: relative;
     top: -36px;
+    max-height: 90px;
+    background: $black;
+    color: $white;
 
     // UI: input help table
     .calculator-input-help-table {
@@ -62,6 +68,12 @@ div.calc-main {
       @include box-sizing(border-box);
       padding: lh();
 
+      label.sr {
+        // including the label here in case other .sr values are added
+        // we want to limit this 'white' only to the label
+        color: $white;
+      }
+
       button#calculator_button {
         background: #111;
         border: 1px solid $black;
@@ -82,6 +94,13 @@ div.calc-main {
         &:hover, &:focus {
           color: #333;
         }
+
+        span.sr {
+          // including the element here in case other .sr values are added
+          // we want to limit this 'white' only to the span
+          background: $black;
+          color: $white;
+        }
       }
 
       input#calculator_output {
@@ -125,19 +144,31 @@ div.calc-main {
           right: 0;
           top: 0;
 
+          #hint-instructions {
+            color: $white;
+          }
+
           #calculator_hint {
-            background: url("../images/info-icon.png") center center no-repeat;
-            height: 35px;
             @include hide-text;
-            width: 35px;
             display: block;
+            height: 35px;
+            width: 35px;
             border: none;
+            background: url("../images/info-icon.png") center center no-repeat;
+            color: $white;
 
             &:focus {
               outline: 5px auto #5b9dd9;
               box-shadow: none;
               border: none;
             }
+
+            span.sr {
+              // including the element here in case other .sr values are added
+              // we want to limit this 'white' only to the span
+              background: $black;
+              color: $white;
+            }
           }
 
           .help {
diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html
index de00734150..97d034c496 100644
--- a/lms/templates/calculator/toggle_calculator.html
+++ b/lms/templates/calculator/toggle_calculator.html
@@ -17,7 +17,7 @@ from django.core.urlresolvers import reverse
         <div class="help-wrapper">
           <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
 
-          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls=“calculator_input_help” aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
+          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
 
           <ul id="calculator_input_help" class="help" aria-hidden="true">
             <li class="hint-item" id="hint-moreinfo">

From 3309581a3630da20e17ef68a0a62addbf1745cf0 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Tue, 7 Jul 2015 13:45:44 -0400
Subject: [PATCH 2/2] Adding uniqueness to some elements

---
 lms/static/sass/course/modules/_calculator.scss | 12 +++---------
 lms/templates/calculator/toggle_calculator.html |  6 +++---
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 5da357037a..8ed0fcc2b4 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -68,9 +68,7 @@ div.calc-main {
       @include box-sizing(border-box);
       padding: lh();
 
-      label.sr {
-        // including the label here in case other .sr values are added
-        // we want to limit this 'white' only to the label
+      .calc-output-label {
         color: $white;
       }
 
@@ -95,9 +93,7 @@ div.calc-main {
           color: #333;
         }
 
-        span.sr {
-          // including the element here in case other .sr values are added
-          // we want to limit this 'white' only to the span
+        .calc-button-label {
           background: $black;
           color: $white;
         }
@@ -163,9 +159,7 @@ div.calc-main {
               border: none;
             }
 
-            span.sr {
-              // including the element here in case other .sr values are added
-              // we want to limit this 'white' only to the span
+            .calc-hint {
               background: $black;
               color: $white;
             }
diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html
index 97d034c496..d1d88d7b89 100644
--- a/lms/templates/calculator/toggle_calculator.html
+++ b/lms/templates/calculator/toggle_calculator.html
@@ -17,7 +17,7 @@ from django.core.urlresolvers import reverse
         <div class="help-wrapper">
           <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
 
-          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
+          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="calc-hint sr">${_("Hints")}</span></button>
 
           <ul id="calculator_input_help" class="help" aria-hidden="true">
             <li class="hint-item" id="hint-moreinfo">
@@ -135,8 +135,8 @@ from django.core.urlresolvers import reverse
         </div>
       </div>
 
-      <button id="calculator_button">=<span class="sr">${_('Calculate')}</span></button>
-      <label for="calculator_output" class="sr">${_('Calculator Output')}</label>
+      <button id="calculator_button">=<span class="calc-button-label sr">${_('Calculate')}</span></button>
+      <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
       <input type="text" id="calculator_output" readonly />
     </form>
   </div>