Merge pull request #16458 from edx/ammar/fix-capa-hint-focus

fix capa hint focus

common/lib/xmodule/xmodule/capa_base.py

@@ -641,12 +641,15 @@ class CapaMixin(ScorableXBlockMixin, CapaFields):
             # Translators: {previous_hints} is the HTML of hints that have already been generated, {hint_number_prefix}
             # is a header for this hint, and {hint_text} is the text of the hint itself.
             # This string is being passed to translation only for possible reordering of the placeholders.
-            total_text = HTML(_('{previous_hints}<li><strong>{hint_number_prefix}</strong>{hint_text}</li>')).format(
+            total_text = HTML(_('{previous_hints}{list_start_tag}{strong_text}{hint_text}</li>')).format(
                 previous_hints=HTML(total_text),
-                # Translators: e.g. "Hint 1 of 3: " meaning we are showing the first of three hints.
-                # This text is shown in bold before the accompanying hint text.
-                hint_number_prefix=Text(_("Hint ({hint_num} of {hints_count}): ")).format(
-                    hint_num=counter + 1, hints_count=len(demand_hints)
+                list_start_tag=HTML('<li class="hint-index-{counter}" tabindex="-1">').format(counter=counter),
+                strong_text=HTML('<strong>{hint_number_prefix}</strong>').format(
+                    # Translators: e.g. "Hint 1 of 3: " meaning we are showing the first of three hints.
+                    # This text is shown in bold before the accompanying hint text.
+                    hint_number_prefix=Text(_("Hint ({hint_num} of {hints_count}): ")).format(
+                        hint_num=counter + 1, hints_count=len(demand_hints)
+                    )
                 ),
                 # Course-authored HTML demand hints are supported.
                 hint_text=HTML(get_inner_html_from_xpath(demand_hints[counter]))

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

@@ -486,8 +486,8 @@
             this.focus_on_notification('submit');
         };
 
-        Problem.prototype.focus_on_hint_notification = function() {
-            this.focus_on_notification('hint');
+        Problem.prototype.focus_on_hint_notification = function(hintIndex) {
+            this.$('.notification-hint .notification-message > ol > li.hint-index-' + hintIndex).focus();
         };
 
         Problem.prototype.focus_on_save_notification = function() {
@@ -1312,7 +1312,7 @@
                         that.hintButton.attr({disabled: 'disabled'});
                     }
                     that.el.find('.notification-hint').show();
-                    that.focus_on_hint_notification();
+                    that.focus_on_hint_notification(nextIndex);
                 } else {
                     that.gentle_alert(response.msg);
                 }

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

@@ -329,19 +329,28 @@ class ProblemPage(PageObject):
         self.wait_for_element_visibility('.notification.general.notification-submit', msg)
         self.wait_for_focus_on_submit_notification()
 
-    def click_hint(self):
+    def click_hint(self, hint_index=0):
         """
         Click the Hint button.
+
+        Arguments:
+            hint_index (int): Index of a displayed hint
         """
         click_css(self, '.problem .hint-button', require_notification=False)
-        self.wait_for_focus_on_hint_notification()
+        self.wait_for_focus_on_hint_notification(hint_index)
 
-    def wait_for_focus_on_hint_notification(self):
+    def wait_for_focus_on_hint_notification(self, hint_index=0):
         """
         Wait for focus to be on the hint notification.
+
+        Arguments:
+            hint_index (int): Index of a displayed hint
         """
+        css = '.notification-hint .notification-message > ol > li.hint-index-{hint_index}'.format(
+            hint_index=hint_index
+        )
         self.wait_for(
-            lambda: self.q(css='.notification-hint').focused,
+            lambda: self.q(css=css).focused,
             'Waiting for the focus to be on the hint notification'
         )
 

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

@@ -144,13 +144,13 @@ class ProblemHintTest(ProblemsTest, EventsTestMixin):
         self.assertEqual([None, None], problem_page.get_hint_button_disabled_attr())
 
         # The hint button rotates through multiple hints
-        problem_page.click_hint()
+        problem_page.click_hint(hint_index=0)
         self.assertTrue(problem_page.is_hint_notification_visible())
         self.assertEqual(problem_page.hint_text, first_hint)
         # Now there are two "hint" buttons, as there is also one in the hint notification.
         self.assertEqual([None, None], problem_page.get_hint_button_disabled_attr())
 
-        problem_page.click_hint()
+        problem_page.click_hint(hint_index=1)
         self.assertEqual(problem_page.hint_text, second_hint)
         # Now both "hint" buttons should be disabled, as there are no more hints.
         self.assertEqual(['true', 'true'], problem_page.get_hint_button_disabled_attr())
@@ -573,7 +573,7 @@ class ProblemWithMathjax(ProblemsTest):
         problem_page.verify_mathjax_rendered_in_problem()
 
         # The hint button rotates through multiple hints
-        problem_page.click_hint()
+        problem_page.click_hint(hint_index=0)
         self.assertEqual(
             ["<strong>Hint (1 of 2): </strong>mathjax should work1"],
             problem_page.extract_hint_text_from_html
@@ -581,7 +581,7 @@ class ProblemWithMathjax(ProblemsTest):
         problem_page.verify_mathjax_rendered_in_hint()
 
         # Rotate the hint and check the problem hint
-        problem_page.click_hint()
+        problem_page.click_hint(hint_index=1)
 
         self.assertEqual(
             [