Merge pull request #9257 from edx/clrux/ux-2515-calc-label

Calculator: fixing remainder of a11y errors

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;
@@ -90,7 +90,7 @@ div.calc-main {
         width: flex-grid(.5) + flex-gutter();
 
         &:hover, &:focus {
-          color: #333;
+          color: $link-color;
         }
 
         .calc-button-label {
@@ -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);
@@ -135,7 +140,7 @@ div.calc-main {
           }
         }
 
-        div.help-wrapper {
+        .help-wrapper {
           position: absolute;
           right: 0;
           top: 0;

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>