Merge branch 'MDL-69116-38' of git://github.com/rezaies/moodle into MOODLE_38_STABLE

question/type/multichoice/amd/build/clearchoice.min.js

@@ -1,2 +1,2 @@
-define ("qtype_multichoice/clearchoice",["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",LINK:"a",RADIO:"input[type=\"radio\"]"},d=function(a){a.find(c.RADIO).prop("disabled",!1).prop("checked",!0)},e=function(a,b){return a.find("div[id=\""+b+"\"]")},f=function(a){a.addClass("sr-only");a.find(c.LINK).attr("tabindex",-1)},g=function(a){a.removeClass("sr-only");a.find(c.LINK).attr("tabindex",0);a.find(c.RADIO).prop("disabled",!0)},h=function(a,h){var i=e(a,h);i.on(b.events.activate,c.LINK,function(a,b){d(i);f(i);b.originalEvent.preventDefault()});a.on(b.events.activate,c.CHOICE_ELEMENT,function(){g(i)});i.find(c.RADIO).focus(function(){var b=a.find(c.CHOICE_ELEMENT).first();b.focus()})};return{init:function init(b,c){b=a("#"+b);h(b,c)}}});
+define ("qtype_multichoice/clearchoice",["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",LINK:"label",RADIO:"input[type=\"radio\"]"},d=function(a){a.find(c.RADIO).prop("disabled",!1).prop("checked",!0)},e=function(a,b){return a.find("div[id=\""+b+"\"]")},f=function(a){a.addClass("sr-only");a.attr("aria-hidden",!0);a.find(c.LINK).attr("tabindex",-1)},g=function(a){a.removeClass("sr-only");a.removeAttr("aria-hidden");a.find(c.LINK).attr("tabindex",0);a.find(c.RADIO).prop("disabled",!0)},h=function(a,h){var i=e(a,h);i.on(b.events.activate,c.LINK,function(a,b){d(i);f(i);b.originalEvent.preventDefault()});a.on("change",c.CHOICE_ELEMENT,function(){g(i)});i.find(c.RADIO).focus(function(){var b=a.find(c.CHOICE_ELEMENT).first();b.focus()})};return{init:function init(b,c){b=a("#"+b);h(b,c)}}});
 //# sourceMappingURL=clearchoice.min.js.map

question/type/multichoice/amd/src/clearchoice.js

@@ -25,7 +25,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
 
     var SELECTORS = {
         CHOICE_ELEMENT: '.answer input',
-        LINK: 'a',
+        LINK: 'label',
         RADIO: 'input[type="radio"]'
     };
 
@@ -55,7 +55,10 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
      * @param {Object} clearChoiceContainer The clear choice option container.
      */
     var hideClearChoiceOption = function(clearChoiceContainer) {
+        // We are using .sr-only and aria-hidden together so while the element is hidden
+        // from both the monitor and the screen-reader, it is still tabbable.
         clearChoiceContainer.addClass('sr-only');
+        clearChoiceContainer.attr('aria-hidden', true);
         clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1);
     };
 
@@ -66,6 +69,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
      */
     var showClearChoiceOption = function(clearChoiceContainer) {
         clearChoiceContainer.removeClass('sr-only');
+        clearChoiceContainer.removeAttr('aria-hidden');
         clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0);
         clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true);
     };
@@ -89,7 +93,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
                 data.originalEvent.preventDefault();
         });
 
-        root.on(CustomEvents.events.activate, SELECTORS.CHOICE_ELEMENT, function() {
+        root.on('change', SELECTORS.CHOICE_ELEMENT, function() {
             // If the event has been triggered by any other choice, show the clear choice option.
             showClearChoiceOption(clearChoiceContainer);
         });

question/type/multichoice/renderer.php

@@ -289,24 +289,31 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base
             'name' => $qa->get_qt_field_name('answer'),
             'id' => $clearchoiceid,
             'value' => -1,
-            'class' => 'sr-only'
+            'class' => 'sr-only',
+            'aria-hidden' => 'true'
+        ];
+        $clearchoicewrapperattrs = [
+            'id' => $clearchoicefieldname,
+            'class' => 'qtype_multichoice_clearchoice',
         ];
 
-        $cssclass = 'qtype_multichoice_clearchoice';
         // When no choice selected during rendering, then hide the clear choice option.
+        // We are using .sr-only and aria-hidden together so while the element is hidden
+        // from both the monitor and the screen-reader, it is still tabbable.
         $linktabindex = 0;
         if (!$hascheckedchoice && $response == -1) {
-            $cssclass .= ' sr-only';
+            $clearchoicewrapperattrs['class'] .= ' sr-only';
+            $clearchoicewrapperattrs['aria-hidden'] = 'true';
             $clearchoiceradioattrs['checked'] = 'checked';
             $linktabindex = -1;
         }
         // Adds an hidden radio that will be checked to give the impression the choice has been cleared.
         $clearchoiceradio = html_writer::empty_tag('input', $clearchoiceradioattrs);
-        $clearchoiceradio .= html_writer::link('', get_string('clearchoice', 'qtype_multichoice'),
+        $clearchoiceradio .= html_writer::tag('label', get_string('clearchoice', 'qtype_multichoice'),
             ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex]);
 
         // Now wrap the radio and label inside a div.
-        $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]);
+        $result = html_writer::tag('div', $clearchoiceradio, $clearchoicewrapperattrs);
 
         // Load required clearchoice AMD module.
         $this->page->requires->js_call_amd('qtype_multichoice/clearchoice', 'init',

theme/boost/scss/moodle/question.scss

@@ -307,7 +307,7 @@ body.path-question-type {
 }
 .qtype_multichoice_clearchoice {
     padding-top: 10px;
-    a {
+    label {
         cursor: pointer;
         text-decoration: underline;
         padding-left: 30px;

theme/boost/style/moodle.css

@@ -15132,7 +15132,7 @@ body.path-question-type {
 
 .qtype_multichoice_clearchoice {
   padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
+  .qtype_multichoice_clearchoice label {
     cursor: pointer;
     text-decoration: underline;
     padding-left: 30px; }

theme/classic/style/moodle.css

@@ -15378,7 +15378,7 @@ body.path-question-type {
 
 .qtype_multichoice_clearchoice {
   padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
+  .qtype_multichoice_clearchoice label {
     cursor: pointer;
     text-decoration: underline;
     padding-left: 30px; }