AC-484 removing aria-activedescendent

lms/static/coffee/fixtures/calculator.html

-<ul>
-  <li class="calc-main">
-    <a href="#" class="calc" title="Open Calculator" role="button" aria-controls="calculator_wrapper" aria-expanded="false">Open Calculator</a>
+<div class="calc-main">
+    <button title="Open Calculator" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
+        <span class="icon fa fa-calculator" aria-hidden="true"></span>
+    </button>
+    
     <div id="calculator_wrapper">
         <form id="calculator">
             <div class="input-wrapper">
                 <input type="text" id="calculator_input" tabindex="-1" />
                 <div class="help-wrapper">
-            <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a>
-            <ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
+                    <button type="button" id="calculator_hint" aria-haspopup="true">Hints</button>
+                    <ul id="calculator_input_help" class="help" data-calculator-hint="hint-integers" role="tooltip" aria-hidden="true">
                         <li class="hint-item" id="hint-moreinfo" tabindex="-1">
                             <p>
                                 <span class="bold">For detailed information, see
@@ -17,13 +19,12 @@
                             </p>
                         </li>
                         <li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">Integers:</span> 2520</p></li>
-                <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:</span> 3.14 or .98</p></li>
+                        <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:/span> 3.14 or .98</p></li>
                     </ul>
                 </div>
             </div>
-        <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
-        <input type="text" id="calculator_output" readonly tabindex="-1" />
+            <input id="calculator_button" type="submit" title="Calculate" value="=" />
+            <input type="text" id="calculator_output" tabindex="-1" readonly />
         </form>
     </div>
-  </li>
-</ul>
+</div>

lms/static/coffee/spec/calculator_spec.coffee

@@ -105,7 +105,7 @@ describe 'Calculator', ->
 
       expect(element.focus).toHaveBeenCalled()
       expect(@calculator.activeHint).toEqual(element)
-      expect(@calculator.hintPopup).toHaveAttr('aria-activedescendant', element.attr('id'))
+      expect(@calculator.hintPopup).toHaveAttr('data-calculator-hint', element.attr('id'))
 
     it 'select the first hint if argument element is not passed', ->
           @calculator.selectHint()

lms/static/coffee/src/calculator.coffee

@@ -14,13 +14,15 @@
 class @Calculator
   constructor: ->
     @hintButton = $('#calculator_hint')
+    @calcInput = $('#calculator_input')
     @hintPopup = $('.help')
     @hintsList = @hintPopup.find('.hint-item')
-    @selectHint($('#' + @hintPopup.attr('aria-activedescendant')));
+    @selectHint($('#' + @hintPopup.attr('data-calculator-hint')));
 
     $('.calc').click @toggle
     $('form#calculator').submit(@calculate).submit (e) ->
       e.preventDefault()
+
     @hintButton
       .click(($.proxy(@handleClickOnHintButton, @)))
 
@@ -35,6 +37,9 @@ class @Calculator
 
     @handleClickOnDocument = $.proxy(@handleClickOnDocument, @)
     
+    @calcInput
+      .focus(($.proxy(@inputClickHandler, @)))
+
   KEY:
     TAB   : 9
     ENTER : 13
@@ -53,19 +58,17 @@ class @Calculator
     isExpanded = false
     icon = 'fa-calculator'    
 
-    $('div.calc-main').toggleClass 'open'
+    $('.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
       $calcWrapper
-        .find('input, a')
-        .attr 'tabindex', -1
+        .attr('aria-hidden', 'true')
     else
       text = gettext('Close Calculator')
       icon = 'fa-close'
       isExpanded = true
 
       $calcWrapper
-        .find('input, a')
-        .attr 'tabindex', 0
+        .attr('aria-hidden', 'false')
       # TODO: Investigate why doing this without the timeout causes it to jump
       # down to the bottom of the page. I suspect it's because it's putting the
       # focus on the text field before it transitions onto the page.
@@ -85,11 +88,15 @@ class @Calculator
 
     $calc.toggleClass 'closed'
     
+  inputClickHandler: ->
+    $('#calculator_output').removeClass('has-result')
+
   showHint: ->
     @hintPopup
       .addClass('shown')
       .attr('aria-hidden', false)
 
+    $('#calculator_output').removeClass('has-result')
 
     $(document).on('click', @handleClickOnDocument)
 
@@ -98,6 +105,8 @@ class @Calculator
       .removeClass('shown')
       .attr('aria-hidden', true)
       
+    $('#calculator_output').removeClass('has-result')
+
     $(document).off('click', @handleClickOnDocument)
 
   selectHint: (element) ->
@@ -106,7 +115,7 @@ class @Calculator
 
     @activeHint = element;
     @activeHint.focus();
-    @hintPopup.attr('aria-activedescendant', element.attr('id'));
+    @hintPopup.attr('data-calculator-hint', element.attr('id'));
 
   prevHint: () ->
     prev = @activeHint.prev(); # the previous hint
@@ -211,4 +220,5 @@ class @Calculator
     $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
       $('#calculator_output')
         .val(data.result)
+        .addClass('has-result')
         .focus()

lms/static/sass/course/modules/_calculator.scss

@@ -70,12 +70,12 @@
       }
 
       #calculator_button {
-        background: #111;
-        border: 1px solid $black;
+        background: $white;
+        border: 1px solid $white;
         border-radius: 0;
         box-shadow: none;
         @include box-sizing(border-box);
-        color: $white;
+        color: $black;
         float: left;
         font-size: 30px;
         font-weight: bold;
@@ -87,7 +87,8 @@
         width: flex-grid(.5) + flex-gutter();
 
         &:hover, &:focus {
-          color: $link-color;
+          background: $blue-d2;
+          color: $white;
         }
 
         .calc-button-label {
@@ -97,11 +98,11 @@
       }
 
       #calculator_output {
-        background: #111;
-        border: 0;
+        background: $white;
+        border: 1px solid $white;
         box-shadow: none;
         @include box-sizing(border-box);
-        color: $white;
+        color: $black;
         float: left;
         font-size: 16px;
         font-weight: bold;
@@ -109,6 +110,11 @@
         padding: 10px;
         -webkit-appearance: none;
         width: flex-grid(4);
+        
+        &.has-result {
+            border: 1px solid $green-d1;
+            box-shadow: inset 0px 0px ($baseline/3) $green-d1;
+        }
       }
 
       .input-wrapper {