Merge pull request #2638 from edx/dcs/ui-confirm-dialog

Converted javascript confirmation dialog on essay grader to modal dialog

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

@@ -400,7 +400,8 @@ class @CombinedOpenEnded
     an openended problem
     ###
     confirmation_text = gettext 'Please confirm that you wish to submit your work. You will not be able to make any changes after submitting.' 
-    @save_answer(event) if confirm(confirmation_text)
+    accessible_confirm confirmation_text, =>
+      @save_answer(event)
 
   save_answer: (event) =>
     @$el.find(@oe_alert_sel).remove()
@@ -507,7 +508,9 @@ class @CombinedOpenEnded
       @errors_area.html(@out_of_sync_message)
 
   confirm_reset: (event) =>
-    @reset(event) if confirm(gettext 'Are you sure you want to remove your previous response to this question?')
+    message = gettext 'Are you sure you want to remove your previous response to this question?'
+    accessible_confirm message, =>
+      @reset(event)
 
   reset: (event) =>
     event.preventDefault()

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

@@ -132,8 +132,9 @@ class OpenResponsePage(PageObject):
         """
         Submit a response for grading.
         """
-        with self.handle_alert():
-            self.css_click('input.submit-button')
+        self.css_click('input.submit-button')
+        # modal dialog confirmation
+        self.css_click('button.ok-button')
 
         # Ensure that the submission completes
         self._wait_for_submitted(self.assessment_type)

lms/templates/courseware/courseware.html

@@ -352,3 +352,4 @@ ${fragment.foot_html()}
         </div>
     </div>
 % endif
+<%include file="../modal/accessible_confirm.html" />

lms/templates/modal/accessible_confirm.html

+<%! from django.utils.translation import ugettext as _ %>
+<div id="accessibile-confirm-modal" class="modal" aria-hidden="true">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="accessibile-confirm-title">
+    <button class="close-modal">&#10005;
+      <span class="sr">
+        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
+        ${_('Close Modal')}
+      </span>
+    </button>
+
+    <header>
+      <h2 id="accessibile-confirm-title">
+          ${_('Confirm')}
+        <span class="sr">,
+          ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
+          ${_("modal open")}
+        </span>
+      </h2>
+    </header>
+    <div role="dialogalert" class="status message" tabindex="-1">
+        <p class="message-title"></p>
+    </div>
+    <hr aria-hidden="true" />
+    <div class="actions">
+        <button class="dismiss ok-button">${'OK'}</button>
+        <button class="dismiss cancel-button" data-dismiss="leanModal">${'Cancel'}</button>
+    </div>
+  </div>
+  <a href="#accessibile-confirm-modal" rel="leanModal" id="confirm_open_button" style="display:none">open</a>
+</div>
+
+<script type="text/javascript">
+var accessible_confirm = function(message, callback) {
+    $("#accessibile-confirm-modal .cancel-button").click(function(){
+        $("#accessibile-confirm-modal .close-modal").click();
+    });
+    $("#accessibile-confirm-modal .ok-button").click(function(){
+        $("#accessibile-confirm-modal .close-modal").click();
+        callback();
+    });
+
+    accessible_modal("#accessibile-confirm-modal #confirm_open_button", "#accessibile-confirm-modal .close-modal", "#accessibile-confirm-modal", ".content-wrapper");
+    $("#accessibile-confirm-modal #confirm_open_button").click();
+    $("#accessibile-confirm-modal .message-title").html(message);
+    // SR.readText(message);
+};
+</script>