diff --git a/question/type/multichoice/amd/build/clearchoice.min.js b/question/type/multichoice/amd/build/clearchoice.min.js
index b679d00e4b1..3c4443ad7cc 100644
--- a/question/type/multichoice/amd/build/clearchoice.min.js
+++ b/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:"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.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
diff --git a/question/type/multichoice/amd/build/clearchoice.min.js.map b/question/type/multichoice/amd/build/clearchoice.min.js.map
index 9116d61ec49..0defcaee680 100644
--- a/question/type/multichoice/amd/build/clearchoice.min.js.map
+++ b/question/type/multichoice/amd/build/clearchoice.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/clearchoice.js"],"names":["define","$","CustomEvents","SELECTORS","CHOICE_ELEMENT","LINK","RADIO","checkClearChoiceRadio","clearChoiceContainer","find","prop","getClearChoiceElement","root","fieldPrefix","hideClearChoiceOption","addClass","attr","showClearChoiceOption","removeClass","registerEventListeners","on","events","activate","e","data","originalEvent","preventDefault","focus","firstChoice","first","init"],"mappings":"AAuBAA,OAAM,iCAAC,CAAC,QAAD,CAAW,gCAAX,CAAD,CAA+C,SAASC,CAAT,CAAYC,CAAZ,CAA0B,IAEvEC,CAAAA,CAAS,CAAG,CACZC,cAAc,CAAE,eADJ,CAEZC,IAAI,CAAE,OAFM,CAGZC,KAAK,CAAE,uBAHK,CAF2D,CAavEC,CAAqB,CAAG,SAASC,CAAT,CAA+B,CACvDA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,KAAmEA,IAAnE,CAAwE,SAAxE,IACH,CAf0E,CAwBvEC,CAAqB,CAAG,SAASC,CAAT,CAAeC,CAAf,CAA4B,CACpD,MAAOD,CAAAA,CAAI,CAACH,IAAL,CAAU,YAAaI,CAAb,CAA2B,KAArC,CACV,CA1B0E,CAiCvEC,CAAqB,CAAG,SAASN,CAAT,CAA+B,CACvDA,CAAoB,CAACO,QAArB,CAA8B,SAA9B,EACAP,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAAC,CAA5D,CACH,CApC0E,CA2CvEC,CAAqB,CAAG,SAAST,CAAT,CAA+B,CACvDA,CAAoB,CAACU,WAArB,CAAiC,SAAjC,EACAV,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAA3D,EACAR,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,IACH,CA/C0E,CAuDvES,CAAsB,CAAG,SAASP,CAAT,CAAeC,CAAf,CAA4B,CACrD,GAAIL,CAAAA,CAAoB,CAAGG,CAAqB,CAACC,CAAD,CAAOC,CAAP,CAAhD,CAEAL,CAAoB,CAACY,EAArB,CAAwBlB,CAAY,CAACmB,MAAb,CAAoBC,QAA5C,CAAsDnB,CAAS,CAACE,IAAhE,CAAsE,SAASkB,CAAT,CAAYC,CAAZ,CAAkB,CAGhFjB,CAAqB,CAACC,CAAD,CAArB,CAEAM,CAAqB,CAACN,CAAD,CAArB,CAEAgB,CAAI,CAACC,aAAL,CAAmBC,cAAnB,EACP,CARD,EAUAd,CAAI,CAACQ,EAAL,CAAQlB,CAAY,CAACmB,MAAb,CAAoBC,QAA5B,CAAsCnB,CAAS,CAACC,cAAhD,CAAgE,UAAW,CAEvEa,CAAqB,CAACT,CAAD,CACxB,CAHD,EAOAA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CqB,KAA3C,CAAiD,UAAW,CACxD,GAAIC,CAAAA,CAAW,CAAGhB,CAAI,CAACH,IAAL,CAAUN,CAAS,CAACC,cAApB,EAAoCyB,KAApC,EAAlB,CACAD,CAAW,CAACD,KAAZ,EACH,CAHD,CAIH,CA/E0E,CA4F3E,MAAO,CACHG,IAAI,CANG,QAAPA,CAAAA,IAAO,CAASlB,CAAT,CAAeC,CAAf,CAA4B,CACnCD,CAAI,CAAGX,CAAC,CAAC,IAAMW,CAAP,CAAR,CACAO,CAAsB,CAACP,CAAD,CAAOC,CAAP,CACzB,CAEM,CAGV,CA/FK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Manages 'Clear my choice' functionality actions.\n *\n * @module qtype_multichoice/clearchoice\n * @copyright 2019 Simey Lameze \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 3.7\n */\ndefine(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {\n\n var SELECTORS = {\n CHOICE_ELEMENT: '.answer input',\n LINK: 'label',\n RADIO: 'input[type=\"radio\"]'\n };\n\n /**\n * Mark clear choice radio as enabled and checked.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var checkClearChoiceRadio = function(clearChoiceContainer) {\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', false).prop('checked', true);\n };\n\n /**\n * Get the clear choice div container.\n *\n * @param {Object} root The question root element.\n * @param {string} fieldPrefix The question outer div prefix.\n * @returns {Object} The clear choice div container.\n */\n var getClearChoiceElement = function(root, fieldPrefix) {\n return root.find('div[id=\"' + fieldPrefix + '\"]');\n };\n\n /**\n * Hide clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var hideClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.addClass('sr-only');\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1);\n };\n\n /**\n * Shows clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var showClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.removeClass('sr-only');\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0);\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true);\n };\n\n /**\n * Register event listeners for the clear choice module.\n *\n * @param {Object} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var registerEventListeners = function(root, fieldPrefix) {\n var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix);\n\n clearChoiceContainer.on(CustomEvents.events.activate, SELECTORS.LINK, function(e, data) {\n\n // Mark the clear choice radio element as checked.\n checkClearChoiceRadio(clearChoiceContainer);\n // Now that the hidden radio has been checked, hide the clear choice option.\n hideClearChoiceOption(clearChoiceContainer);\n\n data.originalEvent.preventDefault();\n });\n\n root.on(CustomEvents.events.activate, SELECTORS.CHOICE_ELEMENT, function() {\n // If the event has been triggered by any other choice, show the clear choice option.\n showClearChoiceOption(clearChoiceContainer);\n });\n\n // If the clear choice radio receives focus from using the tab key, return the focus\n // to the first answer option.\n clearChoiceContainer.find(SELECTORS.RADIO).focus(function() {\n var firstChoice = root.find(SELECTORS.CHOICE_ELEMENT).first();\n firstChoice.focus();\n });\n };\n\n /**\n * Initialise clear choice module.\n\n * @param {string} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var init = function(root, fieldPrefix) {\n root = $('#' + root);\n registerEventListeners(root, fieldPrefix);\n };\n\n return {\n init: init\n };\n});\n"],"file":"clearchoice.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/clearchoice.js"],"names":["define","$","CustomEvents","SELECTORS","CHOICE_ELEMENT","LINK","RADIO","checkClearChoiceRadio","clearChoiceContainer","find","prop","getClearChoiceElement","root","fieldPrefix","hideClearChoiceOption","addClass","attr","showClearChoiceOption","removeClass","removeAttr","registerEventListeners","on","events","activate","e","data","originalEvent","preventDefault","focus","firstChoice","first","init"],"mappings":"AAuBAA,OAAM,iCAAC,CAAC,QAAD,CAAW,gCAAX,CAAD,CAA+C,SAASC,CAAT,CAAYC,CAAZ,CAA0B,IAEvEC,CAAAA,CAAS,CAAG,CACZC,cAAc,CAAE,eADJ,CAEZC,IAAI,CAAE,OAFM,CAGZC,KAAK,CAAE,uBAHK,CAF2D,CAavEC,CAAqB,CAAG,SAASC,CAAT,CAA+B,CACvDA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,KAAmEA,IAAnE,CAAwE,SAAxE,IACH,CAf0E,CAwBvEC,CAAqB,CAAG,SAASC,CAAT,CAAeC,CAAf,CAA4B,CACpD,MAAOD,CAAAA,CAAI,CAACH,IAAL,CAAU,YAAaI,CAAb,CAA2B,KAArC,CACV,CA1B0E,CAiCvEC,CAAqB,CAAG,SAASN,CAAT,CAA+B,CAGvDA,CAAoB,CAACO,QAArB,CAA8B,SAA9B,EACAP,CAAoB,CAACQ,IAArB,CAA0B,aAA1B,KACAR,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAAC,CAA5D,CACH,CAvC0E,CA8CvEC,CAAqB,CAAG,SAAST,CAAT,CAA+B,CACvDA,CAAoB,CAACU,WAArB,CAAiC,SAAjC,EACAV,CAAoB,CAACW,UAArB,CAAgC,aAAhC,EACAX,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACE,IAApC,EAA0CW,IAA1C,CAA+C,UAA/C,CAA2D,CAA3D,EACAR,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CI,IAA3C,CAAgD,UAAhD,IACH,CAnD0E,CA2DvEU,CAAsB,CAAG,SAASR,CAAT,CAAeC,CAAf,CAA4B,CACrD,GAAIL,CAAAA,CAAoB,CAAGG,CAAqB,CAACC,CAAD,CAAOC,CAAP,CAAhD,CAEAL,CAAoB,CAACa,EAArB,CAAwBnB,CAAY,CAACoB,MAAb,CAAoBC,QAA5C,CAAsDpB,CAAS,CAACE,IAAhE,CAAsE,SAASmB,CAAT,CAAYC,CAAZ,CAAkB,CAGhFlB,CAAqB,CAACC,CAAD,CAArB,CAEAM,CAAqB,CAACN,CAAD,CAArB,CAEAiB,CAAI,CAACC,aAAL,CAAmBC,cAAnB,EACP,CARD,EAUAf,CAAI,CAACS,EAAL,CAAQ,QAAR,CAAkBlB,CAAS,CAACC,cAA5B,CAA4C,UAAW,CAEnDa,CAAqB,CAACT,CAAD,CACxB,CAHD,EAOAA,CAAoB,CAACC,IAArB,CAA0BN,CAAS,CAACG,KAApC,EAA2CsB,KAA3C,CAAiD,UAAW,CACxD,GAAIC,CAAAA,CAAW,CAAGjB,CAAI,CAACH,IAAL,CAAUN,CAAS,CAACC,cAApB,EAAoC0B,KAApC,EAAlB,CACAD,CAAW,CAACD,KAAZ,EACH,CAHD,CAIH,CAnF0E,CAgG3E,MAAO,CACHG,IAAI,CANG,QAAPA,CAAAA,IAAO,CAASnB,CAAT,CAAeC,CAAf,CAA4B,CACnCD,CAAI,CAAGX,CAAC,CAAC,IAAMW,CAAP,CAAR,CACAQ,CAAsB,CAACR,CAAD,CAAOC,CAAP,CACzB,CAEM,CAGV,CAnGK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Manages 'Clear my choice' functionality actions.\n *\n * @module qtype_multichoice/clearchoice\n * @copyright 2019 Simey Lameze \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 3.7\n */\ndefine(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {\n\n var SELECTORS = {\n CHOICE_ELEMENT: '.answer input',\n LINK: 'label',\n RADIO: 'input[type=\"radio\"]'\n };\n\n /**\n * Mark clear choice radio as enabled and checked.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var checkClearChoiceRadio = function(clearChoiceContainer) {\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', false).prop('checked', true);\n };\n\n /**\n * Get the clear choice div container.\n *\n * @param {Object} root The question root element.\n * @param {string} fieldPrefix The question outer div prefix.\n * @returns {Object} The clear choice div container.\n */\n var getClearChoiceElement = function(root, fieldPrefix) {\n return root.find('div[id=\"' + fieldPrefix + '\"]');\n };\n\n /**\n * Hide clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var hideClearChoiceOption = function(clearChoiceContainer) {\n // We are using .sr-only and aria-hidden together so while the element is hidden\n // from both the monitor and the screen-reader, it is still tabbable.\n clearChoiceContainer.addClass('sr-only');\n clearChoiceContainer.attr('aria-hidden', true);\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1);\n };\n\n /**\n * Shows clear choice option.\n *\n * @param {Object} clearChoiceContainer The clear choice option container.\n */\n var showClearChoiceOption = function(clearChoiceContainer) {\n clearChoiceContainer.removeClass('sr-only');\n clearChoiceContainer.removeAttr('aria-hidden');\n clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0);\n clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true);\n };\n\n /**\n * Register event listeners for the clear choice module.\n *\n * @param {Object} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var registerEventListeners = function(root, fieldPrefix) {\n var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix);\n\n clearChoiceContainer.on(CustomEvents.events.activate, SELECTORS.LINK, function(e, data) {\n\n // Mark the clear choice radio element as checked.\n checkClearChoiceRadio(clearChoiceContainer);\n // Now that the hidden radio has been checked, hide the clear choice option.\n hideClearChoiceOption(clearChoiceContainer);\n\n data.originalEvent.preventDefault();\n });\n\n root.on('change', SELECTORS.CHOICE_ELEMENT, function() {\n // If the event has been triggered by any other choice, show the clear choice option.\n showClearChoiceOption(clearChoiceContainer);\n });\n\n // If the clear choice radio receives focus from using the tab key, return the focus\n // to the first answer option.\n clearChoiceContainer.find(SELECTORS.RADIO).focus(function() {\n var firstChoice = root.find(SELECTORS.CHOICE_ELEMENT).first();\n firstChoice.focus();\n });\n };\n\n /**\n * Initialise clear choice module.\n\n * @param {string} root The question outer div prefix.\n * @param {string} fieldPrefix The \"Clear choice\" div prefix.\n */\n var init = function(root, fieldPrefix) {\n root = $('#' + root);\n registerEventListeners(root, fieldPrefix);\n };\n\n return {\n init: init\n };\n});\n"],"file":"clearchoice.min.js"}
\ No newline at end of file
diff --git a/question/type/multichoice/amd/src/clearchoice.js b/question/type/multichoice/amd/src/clearchoice.js
index 1c45c0aafce..7fed1d4fcd1 100644
--- a/question/type/multichoice/amd/src/clearchoice.js
+++ b/question/type/multichoice/amd/src/clearchoice.js
@@ -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);
});
diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php
index eedb8c84e79..c886cda6817 100644
--- a/question/type/multichoice/renderer.php
+++ b/question/type/multichoice/renderer.php
@@ -293,14 +293,21 @@ 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;
}
@@ -311,7 +318,7 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base
'class' => 'btn btn-link ml-4 pl-1 mt-2']);
// 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',