MDL-5311 qtype_multichoice: make clear choice option accessible

Thanks to Damyon for the help with accessibility.

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

@@ -1 +1 @@
-define(["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",CLEAR_CHOICE_ELEMENT:'div[class="qtype_multichoice_clearchoice"]'},d=function(a){a.find('input[type="radio"]').prop("checked",!0)},e=function(a,b){return a.find('div[id="'+b+'"]')},f=function(a){a.addClass("hidden")},g=function(a){a.removeClass("hidden")},h=function(a,h){var i=e(a,h);a.on(b.events.activate,c.CLEAR_CHOICE_ELEMENT,function(){d(i),f(i)}),a.on(b.events.activate,c.CHOICE_ELEMENT,function(){g(i)})},i=function(b,c){b=a("#"+b),h(b,c)};return{init:i}});
+define(["jquery","core/custom_interaction_events"],function(a,b){var c={CHOICE_ELEMENT:".answer input",CLEAR_CHOICE_ELEMENT:'div[class="qtype_multichoice_clearchoice"]'},d=function(a){a.find('input[type="radio"]').prop("checked",!0)},e=function(a,b){return a.find('div[id="'+b+'"]')},f=function(a){a.addClass("sr-only")},g=function(a){a.removeClass("sr-only")},h=function(a,h){var i=e(a,h);a.on(b.events.activate,c.CLEAR_CHOICE_ELEMENT,function(){d(i),f(i)}),a.on(b.events.activate,c.CHOICE_ELEMENT,function(){g(i)})},i=function(b,c){b=a("#"+b),h(b,c)};return{init:i}});

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

@@ -54,7 +54,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
      * @param {Object} clearChoiceContainer The clear choice option container.
      */
     var hideClearChoiceOption = function(clearChoiceContainer) {
-        clearChoiceContainer.addClass('hidden');
+        clearChoiceContainer.addClass('sr-only');
     };
 
     /**
@@ -63,7 +63,7 @@ define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
      * @param {Object} clearChoiceContainer The clear choice option container.
      */
     var showClearChoiceOption = function(clearChoiceContainer) {
-        clearChoiceContainer.removeClass('hidden');
+        clearChoiceContainer.removeClass('sr-only');
     };
 
     /**

question/type/multichoice/renderer.php

@@ -288,19 +288,20 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base
             'type' => $this->get_input_type(),
             'name' => $qa->get_qt_field_name('answer'),
             'id' => $clearchoiceid,
-            'value' => -1
+            'value' => -1,
+            'class' => 'sr-only'
         ];
 
         $cssclass = 'qtype_multichoice_clearchoice';
         // When no choice selected during rendering, then hide the clear choice option.
         if (!$hascheckedchoice && $response == -1) {
-            $cssclass .= ' hidden';
+            $cssclass .= ' sr-only';
             $clearchoiceradioattrs['checked'] = 'checked';
         }
         // 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::tag('label', get_string('clearchoice', 'qtype_multichoice'),
-            ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => 0]);
+            ['for' => $clearchoiceid]);
 
         // Now wrap the radio and label inside a div.
         $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]);

question/type/multichoice/styles.css

@@ -26,10 +26,6 @@
     width: 15px;
 }
 
-.qtype_multichoice_clearchoice input {
-    display: none;
-}
-
 /* Editing form. */
 body#page-question-type-multichoice div[id^=fitem_id_][id*=answer_] {
     background: #eee;

theme/boost/scss/moodle/question.scss

@@ -318,9 +318,6 @@ body.path-question-type {
         padding-left: 30px;
     }
 }
-.qtype_multichoice_clearchoice input {
-    display: none;
-}
 
 .formulation input[type="text"],
 .formulation select {

theme/boost/style/moodle.css

@@ -14035,9 +14035,6 @@ body.path-question-type {
     text-decoration: underline;
     padding-left: 30px; }
 
-.qtype_multichoice_clearchoice input {
-  display: none; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;

theme/classic/style/moodle.css

@@ -14286,9 +14286,6 @@ body.path-question-type {
     text-decoration: underline;
     padding-left: 30px; }
 
-.qtype_multichoice_clearchoice input {
-  display: none; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;