MDL-77856 qtype_multianswer: Use Bootstrap Popover for subq feedback

The YUI Overlay widget encloses the subquestion feedback in a div
which causes a div element to be enclosed in the subquestion span. This
leads to an accessibility issue in terms of HTML parsing as inline
elements (span) should not contain block elements (div)
The YUI Overlay widget is also not accessible as it does not really hide
the overlay contents via aria-hidden when the overlay is not being
shown. It's better if we stop using this and use Bootstrap's
popover component which is more accessible by default.

This patch also removes module.js for the qtype_multianswer plugin as
it only contains codes related to rendering the feedback contents in the
YUI overlay widget which is no longer necessary.

question/type/multianswer/renderer.php

@@ -88,13 +88,6 @@ public function formulation_and_controls(question_attempt $qa,
                     array('class' => 'validationerror'));
         }
 
-        $this->page->requires->js_init_call('M.qtype_multianswer.init',
-                array('#' . $qa->get_outer_question_div_unique_id()), false, array(
-                    'name'     => 'qtype_multianswer',
-                    'fullpath' => '/question/type/multianswer/module.js',
-                    'requires' => array('base', 'node', 'event', 'overlay'),
-                ));
-
         return $output;
     }
 
@@ -202,8 +195,33 @@ protected function feedback_popup(question_graded_automatically $subq,
             return '';
         }
 
-        return html_writer::tag('span', implode('<br />', $feedback),
-                array('class' => 'feedbackspan accesshide'));
+        return html_writer::tag('span', implode('<br />', $feedback), [
+            'class' => 'feedbackspan',
+        ]);
+    }
+
+    /**
+     * Render the feedback icon for a sub-question which is also the trigger for the feedback popover.
+     *
+     * @param string $icon The feedback icon
+     * @param string $feedbackcontents The feedback contents to be shown on the popover.
+     * @return string
+     */
+    protected function get_feedback_image(string $icon, string $feedbackcontents): string {
+        if ($icon === '') {
+            return '';
+        }
+
+        return html_writer::tag('button', $icon, [
+            'type' => 'button',
+            'class' => 'btn btn-link p-0',
+            'data-toggle' => 'popover',
+            'data-container' => 'body',
+            'data-content' => $feedbackcontents,
+            'data-placement' => 'right',
+            'data-trigger' => 'focus',
+            'data-html' => 'true',
+        ]);
     }
 
     /**
@@ -315,8 +333,7 @@ public function subquestion(question_attempt $qa, question_display_options $opti
         $output .= html_writer::tag('label', $this->get_answer_label(),
                 array('class' => 'subq accesshide', 'for' => $inputattributes['id']));
         $output .= html_writer::empty_tag('input', $inputattributes);
-        $output .= $feedbackimg;
-        $output .= $feedbackpopup;
+        $output .= $this->get_feedback_image($feedbackimg, $feedbackpopup);
         $output .= html_writer::end_tag('span');
 
         return $output;
@@ -385,8 +402,7 @@ public function subquestion(question_attempt $qa, question_display_options $opti
         $output .= html_writer::tag('label', $this->get_answer_label(),
                 array('class' => 'subq accesshide', 'for' => $inputattributes['id']));
         $output .= $select;
-        $output .= $feedbackimg;
-        $output .= $feedbackpopup;
+        $output .= $this->get_feedback_image($feedbackimg, $feedbackpopup);
         $output .= html_writer::end_tag('span');
 
         return $output;

question/type/multianswer/tests/walkthrough_test.php

@@ -41,7 +41,7 @@ class walkthrough_test extends \qbehaviour_walkthrough_test_base {
 
     protected function get_contains_subq_status(question_state $state) {
         return new \question_pattern_expectation('~' .
-                preg_quote($state->default_string(true), '~') . '<br />~');
+                preg_quote($state->default_string(true), '~') . '~');
     }
 
     public function test_deferred_feedback() {