From 8739f218a9f978082ab960cc309e5ab57a6091ab Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Thu, 6 Aug 2020 01:32:17 +1000 Subject: [PATCH] MDL-69116 qtype_multichoice: accessibility improvement - Screen-readers should not see 'clear my choice' when it is not visible - 'clear my choice' option should only become visible when a choice is selected --- .../type/multichoice/amd/build/clearchoice.min.js | 2 +- .../multichoice/amd/build/clearchoice.min.js.map | 2 +- question/type/multichoice/amd/src/clearchoice.js | 6 +++++- question/type/multichoice/renderer.php | 15 +++++++++++---- 4 files changed, 18 insertions(+), 7 deletions(-) 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',