Merge pull request #14662 from edx/aj/TNL-6356_show_answer_notification

Updates to add a show answer notification and update focus when the

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

@@ -1042,6 +1042,10 @@ div.problem {
       @include notification-by-type($warning-color);
     }
 
+    &.general {
+      @include notification-by-type($general-color-accent);
+    }
+
     &.problem-hint {
       border: 1px solid $uxpl-gray-background;
       border-radius: 6px;

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

@@ -438,25 +438,11 @@ describe 'Problem', ->
         expect($('#answer_1_1')).toHaveHtml 'One'
         expect($('#answer_1_2')).toHaveHtml 'Two'
 
-      it 'sends a message to the window SR element', ->
-        spyOn($, 'postWithPrefix').and.callFake (url, callback) -> callback(answers: {})
-        @problem.show()
-        expect(window.SR.readText).toHaveBeenCalledWith 'Answers to this problem are now shown. Navigate through the problem to review it with answers inline.'
-
       it 'disables the show answer button', ->
         spyOn($, 'postWithPrefix').and.callFake (url, callback) -> callback(answers: {})
         @problem.show()
         expect(@problem.el.find('.show').attr('disabled')).toEqual('disabled')
 
-      it 'sends a SR message when answer is present', ->
-
-        spyOn($, 'postWithPrefix').and.callFake (url, callback) ->
-          callback answers:
-            '1_1': 'answers'
-        @problem.show()
-
-        expect(window.SR.readText).toHaveBeenCalledWith 'Answers to this problem are now shown. Navigate through the problem to review it with answers inline.'
-
       describe 'radio text question', ->
         radio_text_xml='''
 <section class="problem">

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

@@ -174,6 +174,7 @@
             this.showButton.click(this.show);
             this.saveButton = this.$('.action .save');
             this.saveNotification = this.$('.notification-save');
+            this.showAnswerNotification = this.$('.notification-show-answer');
             this.saveButton.click(this.save);
             this.gentleAlertNotification = this.$('.notification-gentle-alert');
             this.submitNotification = this.$('.notification-submit');
@@ -727,8 +728,9 @@
                 }
                 that.el.find('.show').attr('disabled', 'disabled');
                 that.updateProgress(response);
-                window.SR.readText(gettext('Answers to this problem are now shown. Navigate through the problem to review it with answers inline.')); // eslint-disable-line max-len
-                that.scroll_to_problem_meta();
+                that.clear_all_notifications();
+                that.showAnswerNotification.show();
+                that.focus_on_notification('show-answer');
             });
         };
 
@@ -736,6 +738,8 @@
             this.submitNotification.remove();
             this.gentleAlertNotification.hide();
             this.saveNotification.hide();
+            this.showAnswerNotification.hide();
+
         };
 
         Problem.prototype.gentle_alert = function(msg) {
@@ -848,6 +852,7 @@
                     if (bind) {
                         $(textField).on('input', function() {
                             that.saveNotification.hide();
+                            that.showAnswerNotification.hide();
                             that.submitAnswersAndSubmitButton();
                         });
                     }
@@ -867,6 +872,7 @@
                         if (bind) {
                             $(checkboxOrRadio).on('click', function() {
                                 that.saveNotification.hide();
+                                that.showAnswerNotification.hide();
                                 that.submitAnswersAndSubmitButton();
                             });
                         }
@@ -884,6 +890,7 @@
                 if (bind) {
                     $(selectField).on('change', function() {
                         that.saveNotification.hide();
+                        that.showAnswerNotification.hide();
                         that.submitAnswersAndSubmitButton();
                     });
                 }

common/static/sass/edx-pattern-library-shims/base/_variables.scss

@@ -143,6 +143,8 @@ $error-color: rgb(203, 7, 18) !default;
 $success-color: rgb(0, 155, 0) !default;
 $warning-color: rgb(255, 192, 31) !default;
 $warning-color-accent: rgb(255, 252, 221) !default;
+$general-color: $uxpl-blue-base !default;;
+$general-color-accent: $uxpl-blue-base !default
 
 
 // CAPA correctness color to be consistent with Alert styles above

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

@@ -200,6 +200,15 @@ class ProblemPage(PageObject):
         self.wait_for(lambda: self.q(css='.notification.warning.notification-gentle-alert').focused,
                       'Waiting for the focus to be on the gentle alert notification')
 
+    def wait_for_show_answer_notification(self):
+        """
+        Wait for the show answer Notification to be present
+        """
+        self.wait_for_element_visibility('.notification.general.notification-show-answer',
+                                         'Waiting for Show Answer notification to be visible')
+        self.wait_for(lambda: self.q(css='.notification.general.notification-show-answer').focused,
+                      'Waiting for the focus to be on the show answer notification')
+
     def is_gentle_alert_notification_visible(self):
         """
         Is the Gentle Alert Notification visible?

common/test/acceptance/tests/lms/test_problem_types.py

@@ -278,7 +278,7 @@ class ProblemTypeTestMixin(ProblemTypeA11yTestMixin):
         And I should see the problem title is focused
         """
         self.problem_page.click_show()
-        self.problem_page.wait_for_focus_on_problem_meta()
+        self.problem_page.wait_for_show_answer_notification()
 
     @attr(shard=7)
     def test_save_reaction(self):
@@ -495,7 +495,7 @@ class CheckboxProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
         self.problem_page.click_show()
         self.assertTrue(self.problem_page.is_solution_tag_present())
         self.assertTrue(self.problem_page.is_correct_choice_highlighted(correct_choices=[1, 3]))
-        self.problem_page.wait_for_focus_on_problem_meta()
+        self.problem_page.wait_for_show_answer_notification()
 
 
 class MultipleChoiceProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
@@ -562,7 +562,7 @@ class MultipleChoiceProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
         self.assertTrue(self.problem_page.is_correct_choice_highlighted(correct_choices=[3]))
 
         # Finally, make sure that clicking Show Answer moved focus to the correct place.
-        self.problem_page.wait_for_focus_on_problem_meta()
+        self.problem_page.wait_for_show_answer_notification()
 
 
 class RadioProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):

lms/templates/problem.html

@@ -106,4 +106,11 @@ from openedx.core.djangolib.markup import HTML
       notification_message=save_message,
       is_hidden=not has_saved_answers"
     />
+    <%include file="problem_notifications.html" args="
+      notification_type='general',
+      notification_icon='fa-info-circle',
+      notification_name='show-answer',
+      notification_message=_('Answers are displayed within the problem'),
+      is_hidden=True"
+    />
 </div>