Fix BLD-165.

lms/static/coffee/fixtures/calculator.html

@@ -4,14 +4,14 @@
     <div id="calculator_wrapper">
       <form id="calculator">
         <div class="input-wrapper">
-          <input type="text" id="calculator_input" />
+          <input type="text" id="calculator_input" tabindex="-1" />
           <div class="help-wrapper">
-            <a href="#">Hints</a>
+            <a href="#" aria-expanded="false" tabindex="-1">Hints</a>
             <dl class="help"></dl>
           </div>
         </div>
-        <input id="calculator_button" type="submit" value="="/>
-        <input type="text" id="calculator_output" readonly />
+        <input id="calculator_button" type="submit" value="=" tabindex="-1" />
+        <input type="text" id="calculator_output" readonly tabindex="-1" />
       </form>
     </div>
   </li>

lms/static/coffee/src/calculator.coffee

@@ -3,25 +3,55 @@ class @Calculator
     $('.calc').click @toggle
     $('form#calculator').submit(@calculate).submit (e) ->
       e.preventDefault()
-    $('div.help-wrapper a').hover(@helpToggle).click (e) ->
+    $('div.help-wrapper a')
+      .focus($.proxy @helpOnFocus, @)
+      .blur($.proxy @helpOnBlur, @)
+      .hover(
+        $.proxy(@helpShow, @),
+        $.proxy(@helpHide, @)
+      )
+      .click (e) ->
         e.preventDefault()
 
   toggle: (event) ->
     event.preventDefault()
+    $calc = $('.calc')
+    $calcWrapper = $('#calculator_wrapper')
+
     $('div.calc-main').toggleClass 'open'
-    if $('.calc.closed').length
-      $('.calc').attr 'aria-label', 'Open Calculator'
+    if $calc.hasClass('closed')
+      $calc.attr 'aria-label', 'Open Calculator'
+      $calcWrapper
+        .find('input, a')
+        .attr 'tabindex', -1
     else
-      $('.calc').attr 'aria-label', 'Close Calculator'
+      $calc.attr 'aria-label', 'Close Calculator'
+      $calcWrapper
+        .find('input, a')
+        .attr 'tabindex', null
       # 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.
-      setTimeout (-> $('#calculator_wrapper #calculator_input').focus()), 100
+      setTimeout (-> $calcWrapper.find('#calculator_input').focus()), 100
+
+    $calc.toggleClass 'closed'
+
+  helpOnFocus: (e) ->
+    e.preventDefault()
+    @isFocusedHelp = true
+    @helpShow()
+
+  helpOnBlur: (e) ->
+    e.preventDefault()
+    @isFocusedHelp = false
+    @helpHide()
 
-    $('.calc').toggleClass 'closed'
+  helpShow: ->
+    $('.help').addClass 'shown'
 
-  helpToggle: ->
-    $('.help').toggleClass 'shown'
+  helpHide: ->
+    if not @isFocusedHelp
+      $('.help').removeClass 'shown'
 
   calculate: ->
     $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->