Calculator a11y issues

AC-107

lms/static/coffee/src/calculator.coffee

@@ -82,6 +82,7 @@ class @Calculator
       .addClass('shown')
       .attr('aria-hidden', false)
 
+
     $(document).on('click', @handleClickOnDocument)
 
   hideHint: ->
@@ -185,11 +186,14 @@ class @Calculator
     @hideHint()
 
   handleClickOnHintButton: (e) ->
+    e.preventDefault()
     e.stopPropagation()
     if @hintPopup.hasClass 'shown'
       @hideHint()
+      @hintButton.attr('aria-expanded', false)
     else
       @showHint()
+      @hintButton.attr('aria-expanded', true)
       @activeHint.focus()
 
   handleClickOnHintPopup: (e) ->

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

@@ -62,7 +62,7 @@ div.calc-main {
       @include box-sizing(border-box);
       padding: lh();
 
-      input#calculator_button {
+      button#calculator_button {
         background: #111;
         border: 1px solid $black;
         border-radius: 0;
@@ -131,9 +131,12 @@ div.calc-main {
             @include hide-text;
             width: 35px;
             display: block;
+            border: none;
 
             &:focus {
               outline: 5px auto #5b9dd9;
+              box-shadow: none;
+              border: none;
             }
           }
 

lms/templates/calculator/toggle_calculator.html

@@ -9,15 +9,16 @@
   <div id="calculator_wrapper">
     <form id="calculator">
       <div class="input-wrapper">
-        <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />
+        <label for="calculator_input" class="sr">${_('Calculator Input')}</label>
+        <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
 
         <div class="help-wrapper">
           <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
 
-          <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1" aria-describedby="hint-instructions">${_("Hints")}</a>
+          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls=“calculator_input_help” aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
 
-          <ul id="calculator_input_help" class="help" aria-activedescendant="hint-moreinfo" role="tooltip" aria-hidden="true">
-            <li class="hint-item" id="hint-moreinfo" tabindex="-1">
+          <ul id="calculator_input_help" class="help" aria-hidden="true">
+            <li class="hint-item" id="hint-moreinfo">
                 <p><span class="bold">${_("For detailed information, see {math_link_start}Entering Mathematical and Scientific Expressions{math_link_end} in the {guide_link_start}edX Guide for Students{guide_link_end}.").format(
                   math_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">',
                   math_link_end='</a>',
@@ -26,17 +27,17 @@
                 )}</span></p>
             </li>
 
-            <li class="hint-item" id="hint-tips" tabindex="-1"><p><span class="bold">${_("Tips")}:</span> </p>
+            <li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p>
               <ul>
-                <li class="hint-item" id="hint-paren" tabindex="-1"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
-                <li class="hint-item" id="hint-spaces" tabindex="-1"><p>${_("Do not use spaces in expressions.")}</p></li>
-                <li class="hint-item" id="hint-howto-constants" tabindex="-1"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
-                <li class="hint-item" id="hint-howto-maffixes" tabindex="-1"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
-                <li class="hint-item" id="hint-howto-functions" tabindex="-1"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
+                <li class="hint-item" id="hint-paren"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
+                <li class="hint-item" id="hint-spaces"><p>${_("Do not use spaces in expressions.")}</p></li>
+                <li class="hint-item" id="hint-howto-constants"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
+                <li class="hint-item" id="hint-howto-maffixes"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
+                <li class="hint-item" id="hint-howto-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
               </ul>
             </li>
 
-            <li class="hint-item" id="hint-list" tabindex="-1">
+            <li class="hint-item" id="hint-list">
               <table class="calculator-input-help-table">
                 <tbody>
                   <tr>
@@ -132,8 +133,9 @@
         </div>
       </div>
 
-      <input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" aria-label="${_('Calculate')}" value="=" tabindex="-1" />
-      <input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" />
+      <button id="calculator_button">=<span class="sr">${_('Calculate')}</span></button>
+      <label for="calculator_output" class="sr">${_('Calculator Output')}</label>
+      <input type="text" id="calculator_output" readonly />
     </form>
   </div>
   </div>