Add a11y.

lms/static/coffee/fixtures/calculator.html

 <ul>
   <li class="calc-main">
-    <a href="#" class="calc">Calculator</a>
+    <a href="#" class="calc" aria-label="Open Calculator" role="button" aria-controls="calculator_wrapper" aria-expanded="false">Calculator</a>
     <div id="calculator_wrapper">
       <form id="calculator">
         <div class="input-wrapper">
           <input type="text" id="calculator_input" tabindex="-1" />
           <div class="help-wrapper">
-            <a href="#" aria-expanded="false" tabindex="-1">Hints</a>
-            <dl class="help"></dl>
+            <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>
         </div>
-        <input id="calculator_button" type="submit" value="=" tabindex="-1" />
+        <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
         <input type="text" id="calculator_output" readonly tabindex="-1" />
       </form>
     </div>

lms/static/coffee/src/calculator.coffee

@@ -4,14 +4,15 @@ class @Calculator
     $('form#calculator').submit(@calculate).submit (e) ->
       e.preventDefault()
     $('div.help-wrapper a')
-      .focus($.proxy @helpOnFocus, @)
-      .blur($.proxy @helpOnBlur, @)
       .hover(
         $.proxy(@helpShow, @),
         $.proxy(@helpHide, @)
       )
       .click (e) ->
         e.preventDefault()
+      $('div.help-wrapper')
+        .focusin($.proxy @helpOnFocus, @)
+        .focusout($.proxy @helpOnBlur, @)
 
   toggle: (event) ->
     event.preventDefault()
@@ -20,15 +21,19 @@ class @Calculator
 
     $('div.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
-      $calc.attr 'aria-label', 'Open Calculator'
+      $calc.attr
+        'aria-label': 'Open Calculator'
+        'aria-expanded': false
       $calcWrapper
-        .find('input, a')
+        .find('input, a, dt, dd')
         .attr 'tabindex', -1
     else
-      $calc.attr 'aria-label', 'Close Calculator'
+      $calc.attr
+        'aria-label': 'Close Calculator'
+        'aria-expanded': true
       $calcWrapper
         .find('input, a')
-        .attr 'tabindex', null
+        .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
       # focus on the text field before it transitions onto the page.
@@ -48,11 +53,15 @@ class @Calculator
 
   helpShow: ->
     $('.help').addClass 'shown'
+    $('#calculator_hint').attr 'aria-expanded', true
 
   helpHide: ->
     if not @isFocusedHelp
       $('.help').removeClass 'shown'
+      $('#calculator_hint').attr 'aria-expanded', false
 
   calculate: ->
     $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
-      $('#calculator_output').val(data.result)
+      $('#calculator_output')
+        .val(data.result)
+        .focus()

lms/templates/courseware/courseware.html

@@ -208,24 +208,23 @@ ${fragment.foot_html()}
 
 % if course.show_calculator:
     <div class="calc-main">
-        <a aria-label="${_('Open Calculator')}" href="#" class="calc">${_("Calculator")}</a>
-
+        <a aria-label="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Calculator")}</a>
         <div id="calculator_wrapper">
             <form id="calculator">
                 <div class="input-wrapper">
-                    <input type="text" id="calculator_input" title="Calculator Input Field" />
+                    <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />
 
                     <div class="help-wrapper">
-                        <a href="#">${_("Hints")}</a>
-                        <dl class="help">
-                            <dt>${_("Suffixes:")}</dt>
-                            <dd> %kMGTcmunp</dd>
-                            <dt>${_("Operations:")}</dt>
-                            <dd>^ * / + - ()</dd>
-                            <dt>${_("Functions:")}</dt>
-                            <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
-                            <dt>${_("Constants")}</dt>
-                            <dd>e, pi</dd>
+                        <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">
+                            <dt tabindex="0">${_("Suffixes:")}</dt>
+                            <dd tabindex="0"> %kMGTcmunp</dd>
+                            <dt tabindex="0">${_("Operations:")}</dt>
+                            <dd tabindex="0">^ * / + - ()</dd>
+                            <dt tabindex="0">${_("Functions:")}</dt>
+                            <dd tabindex="0">sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
+                            <dt tabindex="0">${_("Constants")}</dt>
+                            <dd tabindex="0">e, pi</dd>
 
                             <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
 
@@ -233,8 +232,8 @@ ${fragment.foot_html()}
                         </dl>
                     </div>
                 </div>
-                <input id="calculator_button" type="submit" title="Calculate" value="="/>
-                <input type="text" id="calculator_output" title="Calculator Output Field" readonly />
+                <input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" arial-label="${_('Calculate')}" value="=" tabindex="-1" />
+                <input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" />
             </form>
 
         </div>