MDL-5311 qtype_multichoice: make clear choice option accessible
authorSimey Lameze <simey@moodle.com>
Thu, 4 Apr 2019 05:46:02 +0000 (13:46 +0800)
committerSimey Lameze <simey@moodle.com>
Mon, 29 Apr 2019 07:16:08 +0000 (15:16 +0800)
Thanks to Damyon for the help with accessibility.

question/type/multichoice/amd/build/clearchoice.min.js
question/type/multichoice/amd/src/clearchoice.js
question/type/multichoice/renderer.php
question/type/multichoice/styles.css
theme/boost/scss/moodle/question.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index dc8c9fb..3a00244 100644 (file)
Binary files a/question/type/multichoice/amd/build/clearchoice.min.js and b/question/type/multichoice/amd/build/clearchoice.min.js differ
index 59a03e6..3c15efb 100644 (file)
@@ -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');
     };
 
     /**
index b48809a..61585b4 100644 (file)
@@ -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]);
index 77b4968..5707361 100644 (file)
     width: 15px;
 }
 
-.qtype_multichoice_clearchoice input {
-    display: none;
-}
-
 /* Editing form. */
 body#page-question-type-multichoice div[id^=fitem_id_][id*=answer_] {
     background: #eee;
index e12fe7a..786c7f1 100644 (file)
@@ -318,9 +318,6 @@ body.path-question-type {
         padding-left: 30px;
     }
 }
-.qtype_multichoice_clearchoice input {
-    display: none;
-}
 
 .formulation input[type="text"],
 .formulation select {
index 332ea8c..f24e0ba 100644 (file)
@@ -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;
index 8c5de0e..15e39d6 100644 (file)
@@ -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;