BLD-400: Update the calculator hints tooltip.

lms/static/coffee/fixtures/calculator.html

@@ -7,7 +7,7 @@
           <input type="text" id="calculator_input" tabindex="-1" />
           <div class="help-wrapper">
             <a id="calculator_hint" href="#" role="button" aria-haspopup="true" aria-controls="calculator_input_help" aria-expanded="false" tabindex="-1">Hints</a>
-            <dl id="calculator_input_help" class="help"></dl>
+            <div id="calculator_input_help" class="help" role="tooltip" aria-hidden="true"></div>
           </div>
         </div>
         <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />

lms/static/coffee/spec/calculator_spec.coffee

@@ -55,11 +55,26 @@ describe 'Calculator', ->
     it 'show the help overlay', ->
       @calculator.helpShow()
       expect($('.help')).toHaveClass('shown')
+      expect($('.help')).toHaveAttr('aria-hidden', 'false')
 
   describe 'helpHide', ->
     it 'show the help overlay', ->
       @calculator.helpHide()
       expect($('.help')).not.toHaveClass('shown')
+      expect($('.help')).toHaveAttr('aria-hidden', 'true')
+
+  describe 'handleKeyDown', ->
+    it 'on pressing Esc the hint becomes hidden', ->
+      @calculator.helpShow()
+      e = jQuery.Event('keydown', { which: 27 } );
+      $(document).trigger(e);
+      expect($('.help')).not.toHaveClass 'shown'
+
+    it 'On pressing other buttons the hint continue to show', ->
+      @calculator.helpShow()
+      e = jQuery.Event('keydown', { which: 32 } );
+      $(document).trigger(e);
+      expect($('.help')).toHaveClass 'shown'
 
   describe 'calculate', ->
     beforeEach ->

lms/static/coffee/src/calculator.coffee

@@ -10,6 +10,9 @@ class @Calculator
       )
       .click (e) ->
         e.preventDefault()
+
+      $(document).keydown $.proxy(@handleKeyDown, @)
+
       $('div.help-wrapper')
         .focusin($.proxy @helpOnFocus, @)
         .focusout($.proxy @helpOnBlur, @)
@@ -24,14 +27,14 @@ class @Calculator
     $('div.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
       $calcWrapper
-        .find('input, a, dt, dd')
+        .find('input, a')
         .attr 'tabindex', -1
     else
       text = gettext('Close Calculator')
       isExpanded = true
 
       $calcWrapper
-        .find('input, a, dt, dd')
+        .find('input, a,')
         .attr 'tabindex', 0
       # 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
@@ -57,13 +60,21 @@ class @Calculator
     @helpHide()
 
   helpShow: ->
-    $('.help').addClass 'shown'
-    $('#calculator_hint').attr 'aria-expanded', true
+    $('.help')
+      .addClass('shown')
+      .attr('aria-hidden', false)
 
   helpHide: ->
     if not @isFocusedHelp
-      $('.help').removeClass 'shown'
-      $('#calculator_hint').attr 'aria-expanded', false
+      $('.help')
+        .removeClass('shown')
+        .attr('aria-hidden', true)
+
+  handleKeyDown: (e) ->
+    ESC = 27
+    if e.which is ESC and $('.help').hasClass 'shown'
+      @isFocusedHelp = false
+      @helpHide()
 
   calculate: ->
     $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->