revises the show/hide answer input to use an HTML button element for accessibility purposes

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -555,6 +555,15 @@ section.problem {
       @extend .blue-button;
     }
 
+    button.show {
+      height: ($baseline*2);
+
+      span {
+        font-size: 1.0em;
+        font-weight: 600;
+      }
+    }
+
     .submission_feedback {
       // background: #F3F3F3;
       // border: 1px solid #ddd;

common/lib/xmodule/xmodule/js/fixtures/problem_content.html

@@ -13,7 +13,7 @@
     <input class="check" type="button" value="Check">
     <input class="reset" type="button" value="Reset">
     <input class="save" type="button" value="Save">
-    <input class="show" type="button" value="Show Answer">
+    <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
     <section class="submission_feedback"></section>
   </section>

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -24,7 +24,7 @@ class @Problem
     @$('section.action input.check').click @check_fd
     #@$('section.action input.check').click @check
     @$('section.action input.reset').click @reset
-    @$('section.action input.show').click @show
+    @$('section.action button.show').click @show
     @$('section.action input.save').click @save
 
     # Collapsibles
@@ -260,14 +260,14 @@ class @Problem
           @el.find('.problem > div').each (index, element) =>
             MathJax.Hub.Queue ["Typeset", MathJax.Hub, element]
 
-        @$('.show').val 'Hide Answer'
+        @$('.show-label').text 'Hide Answer(s)'
         @el.addClass 'showed'
         @updateProgress response
     else
       @$('[id^=answer_], [id^=solution_]').text ''
       @$('[correct_answer]').attr correct_answer: null
       @el.removeClass 'showed'
-      @$('.show').val 'Show Answer'
+      @$('.show-label').text 'Show Answer(s)'
 
       @el.find(".capa_inputtype").each (index, inputtype) =>
         display = @inputtypeDisplays[$(inputtype).attr('id')]

lms/templates/problem.html

@@ -10,19 +10,19 @@
   ${ problem['html'] }
 
   <section class="action">
-    <input type="hidden" name="problem_id" value="${ problem['name'] }">
+    <input type="hidden" name="problem_id" value="${ problem['name'] }" />
 
     % if check_button:
-    <input class="check ${ check_button }" type="button" value="${ check_button }">
+    <input class="check ${ check_button }" type="button" value="${ check_button }" />
     % endif
     % if reset_button:
-    <input class="reset" type="button" value="Reset">
+    <input class="reset" type="button" value="Reset" />
     % endif
     % if save_button:
-    <input class="save" type="button" value="Save">
+    <input class="save" type="button" value="Save" />
     % endif
     % if answer_available:
-    <input class="show" type="button" value="Show Answer">
+    <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     % endif
     % if attempts_allowed :
     <section class="submission_feedback">