Standrize buttons in assessment problems

Assessment problems was having input type="button" which cause accessibility issues.
changed them to <button> and added span with class sr.

TNL-1693

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

@@ -12,9 +12,9 @@
     <span id="display_example_1"></span>
     <span id="input_example_1_dynamath"></span>
 
-    <input class="check" type="button" value="Check">
-    <input class="reset" type="button" value="Reset">
-    <input class="save" type="button" value="Save">
+    <button class="check">Check</button>
+    <button class="reset">Reset</button>
+    <button class="save">Save</button>
     <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>
     <div class="submission_feedback"></div>

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -54,19 +54,19 @@ describe 'Problem', ->
       expect(window.update_schematics).toHaveBeenCalled()
 
     it 'bind answer refresh on button click', ->
-      expect($('div.action input:button')).toHandleWith 'click', @problem.refreshAnswers
+      expect($('div.action button')).toHandleWith 'click', @problem.refreshAnswers
 
     it 'bind the check button', ->
-      expect($('div.action input.check')).toHandleWith 'click', @problem.check_fd
+      expect($('div.action button.check')).toHandleWith 'click', @problem.check_fd
 
     it 'bind the reset button', ->
-      expect($('div.action input.reset')).toHandleWith 'click', @problem.reset
+      expect($('div.action button.reset')).toHandleWith 'click', @problem.reset
 
     it 'bind the show button', ->
       expect($('div.action button.show')).toHandleWith 'click', @problem.show
 
     it 'bind the save button', ->
-      expect($('div.action input.save')).toHandleWith 'click', @problem.save
+      expect($('div.action button.save')).toHandleWith 'click', @problem.save
 
     it 'bind the math input', ->
       expect($('input.math')).toHandleWith 'keyup', @problem.refreshMath
@@ -86,7 +86,7 @@ describe 'Problem', ->
       $(@).html readFixtures('problem_content_1240.html')
 
     it 'bind the check button', ->
-      expect($('div.action input.check')).toHandleWith 'click', @problem.check_fd
+      expect($('div.action button.check')).toHandleWith 'click', @problem.check_fd
 
     it 'bind the show button', ->
       expect($('div.action button.show')).toHandleWith 'click', @problem.show

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

@@ -26,14 +26,15 @@ class @Problem
 
     problem_prefix = @element_id.replace(/problem_/,'')
     @inputs = @$("[id^='input_#{problem_prefix}_']")
-    @$('div.action input:button').click @refreshAnswers
-    @checkButton = @$('div.action input.check')
-    @checkButtonCheckText = @checkButton.val()
+    @$('div.action button').click @refreshAnswers
+    @checkButton = @$('div.action button.check')
+    @checkButtonLabel = @$('div.action button.check span.check-label')
+    @checkButtonCheckText = @checkButtonLabel.text()
     @checkButtonCheckingText = @checkButton.data('checking')
     @checkButton.click @check_fd
-    @$('div.action input.reset').click @reset
+    @$('div.action button.reset').click @reset
     @$('div.action button.show').click @show
-    @$('div.action input.save').click @save
+    @$('div.action button.save').click @save
     # Accessibility helper for sighted keyboard users to show <clarification> tooltips on focus:
     @$('.clarification').focus (ev) =>
       icon = $(ev.target).children "i"
@@ -315,7 +316,7 @@ class @Problem
           @updateProgress response
           if @el.hasClass 'showed'
             @el.removeClass 'showed'
-          @$('div.action input.check').focus()
+          @$('div.action button.check').focus()
         else
           @gentle_alert response.success
       Logger.log 'problem_graded', [@answers, response.contents], @id
@@ -680,11 +681,11 @@ class @Problem
     if enable
       @checkButton.removeClass 'is-disabled'
       @checkButton.attr({'aria-disabled': 'false'})
-      @checkButton.val(@checkButtonCheckText)
+      @checkButtonLabel.text(@checkButtonCheckText)
     else
       @checkButton.addClass 'is-disabled'
       @checkButton.attr({'aria-disabled': 'true'})
-      @checkButton.val(@checkButtonCheckingText)
+      @checkButtonLabel.text(@checkButtonCheckingText)
 
   enableCheckButtonAfterResponse: =>
     @has_response = true

common/test/acceptance/pages/lms/problem.py

@@ -38,7 +38,7 @@ class ProblemPage(PageObject):
         """
         Click the Check button!
         """
-        self.q(css='div.problem input.check').click()
+        self.q(css='div.problem button.check').click()
         self.wait_for_ajax()
 
     def is_correct(self):

lms/djangoapps/courseware/features/conditional.py

@@ -74,7 +74,7 @@ class ConditionalSteps(object):
 
         if not_attempted is None:
             answer_problem(self.COURSE_NUM, 'string', True)
-            world.css_click("input.check")
+            world.css_click("button.check")
 
     def when_i_view_the_conditional(self, step):
         r'I view the conditional$'

lms/djangoapps/courseware/features/problems.py

@@ -92,7 +92,7 @@ def check_problem(step):
     # first scroll down so the loading mathjax button does not
     # cover up the Check button
     world.browser.execute_script("window.scrollTo(0,1024)")
-    world.css_click("input.check")
+    world.css_click("button.check")
 
     # Wait for the problem to finish re-rendering
     world.wait_for_ajax_complete()
@@ -115,7 +115,7 @@ def assert_problem_has_answer(step, problem_type, answer_class):
 
 @step(u'I reset the problem')
 def reset_problem(_step):
-    world.css_click('input.reset')
+    world.css_click('button.reset')
 
     # Wait for the problem to finish re-rendering
     world.wait_for_ajax_complete()
@@ -131,7 +131,7 @@ def press_the_button_with_label(_step, buttonname):
 
 @step(u'The "([^"]*)" button does( not)? appear')
 def action_button_present(_step, buttonname, doesnt_appear):
-    button_css = 'div.action input[value*="%s"]' % buttonname
+    button_css = 'div.action button[data-value*="%s"]' % buttonname
     if bool(doesnt_appear):
         assert world.is_css_not_present(button_css)
     else:

lms/templates/problem.html

@@ -14,13 +14,13 @@
     <input type="hidden" name="problem_id" value="${ problem['name'] }" />
 
     % if check_button:
-    <input class="check ${ check_button }" type="button" data-checking="${ check_button_checking }" value="${ check_button }" />
+    <button class="check ${ check_button }" data-checking="${ check_button_checking }" data-value="${ check_button }"><span class="check-label">${ check_button }</span><span class="sr"> ${_("your answer")}</span></button>
     % endif
     % if reset_button:
-    <input class="reset" type="button" value="${_('Reset')}" />
+    <button class="reset" data-value="${_('Reset')}">${_('Reset')}<span class="sr"> ${_("your answer")}</span></button>
     % endif
     % if save_button:
-    <input class="save" type="button" value="${_('Save')}" />
+    <button class="save" data-value="${_('Save')}">${_('Save')}<span class="sr"> ${_("your answer")}</span></button>
     % endif
     % if answer_available:
     <button class="show"><span class="show-label">${_('Show Answer')}</span> <span class="sr">${_("Reveal Answer")}</span></button>