Merge pull request #3134 from edx/dcs/a11y-gentle-alert

Fixes LMS-2474 by ensuring that readElts reads always reads an element

common/lib/xmodule/xmodule/js/js_test.yml

@@ -58,6 +58,7 @@ lib_paths:
     - common_static/js/test/add_ajax_prefix.js
     - common_static/js/src/utility.js
     - public/js/split_test_staff.js
+    - common_static/js/src/accessibility_tools.js
 
 # Paths to spec (test) JavaScript files
 spec_paths:

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

@@ -7,10 +7,8 @@ describe 'Problem', ->
     @stubbedJax = root: jasmine.createSpyObj('jax.root', ['toMathML'])
     MathJax.Hub.getAllJax.andReturn [@stubbedJax]
     window.update_schematics = ->
-    # mock the screen reader alert
-    window.SR = 
-      readElts: `function(){}`
-      readText: `function(){}`
+    spyOn SR, 'readElts'
+    spyOn SR, 'readText'
 
     # Load this function from spec/helper.coffee
     # Note that if your test fails with a message like:
@@ -168,6 +166,7 @@ describe 'Problem', ->
           callback(success: 'correct', contents: 'Correct!')
         @problem.check()
         expect(@problem.el.html()).toEqual 'Correct!'
+        expect(window.SR.readElts).toHaveBeenCalled()
 
     describe 'when the response is incorrect', ->
       it 'call render with returned content', ->
@@ -175,6 +174,7 @@ describe 'Problem', ->
           callback(success: 'incorrect', contents: 'Incorrect!')
         @problem.check()
         expect(@problem.el.html()).toEqual 'Incorrect!'
+        expect(window.SR.readElts).toHaveBeenCalled()
 
     # TODO: figure out why failing
     xdescribe 'when the response is undetermined', ->
@@ -237,12 +237,25 @@ describe 'Problem', ->
         spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: {})
         @problem.show()
         expect($('.show .show-label')).toHaveText 'Hide Answer'
+        expect(window.SR.readElts).toHaveBeenCalled()
 
       it 'add the showed class to element', ->
         spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: {})
         @problem.show()
         expect(@problem.el).toHaveClass 'showed'
 
+      it 'reads the answers', ->
+        runs ->
+          spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: 'answers')
+          @problem.show()
+
+        waitsFor (->
+          return jQuery.active == 0
+        ), "jQuery requests finished", 1000
+
+        runs ->
+          expect(window.SR.readElts).toHaveBeenCalled()
+
       describe 'multiple choice question', ->
         beforeEach ->
           @problem.el.prepend '''
@@ -487,6 +500,17 @@ describe 'Problem', ->
       expect($.postWithPrefix).toHaveBeenCalledWith '/problem/Problem1/problem_save',
           'foo=1&bar=2', jasmine.any(Function)
 
+    it 'reads the save message', ->
+      runs ->
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'OK')
+        @problem.save()
+      waitsFor (->
+        return jQuery.active == 0
+      ), "jQuery requests finished", 1000
+
+      runs ->
+        expect(window.SR.readElts).toHaveBeenCalled()
+
     # TODO: figure out why failing
     xit 'alert to the user', ->
       spyOn window, 'alert'

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

@@ -366,6 +366,7 @@ class @Problem
     alert_elem = "<div class='capa_alert'>" + msg + "</div>"
     @el.find('.action').after(alert_elem)
     @el.find('.capa_alert').css(opacity: 0).animate(opacity: 1, 700)
+    window.SR.readElts @el.find('.capa_alert')
 
   save: =>
     if not @check_save_waitfor(@save_internal)

common/static/js/src/accessibility_tools.js

@@ -158,9 +158,7 @@ $(function(){
       };
 
       SRAlert.prototype.readElts = function(elts) {
-        var feedback,
-          _this = this;
-        feedback = '';
+        var feedback = '';
         $.each(elts, function(idx, value) {
           return feedback += '<p>' + $(value).html() + '</p>\n';
         });