Commit 2589dcea authored by Simey Lameze's avatar Simey Lameze
Browse files

MDL-5311 qtype_multichoice: make clear choice option accessible

Thanks to Damyon for the help with accessibility.
parent 9064f17b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -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');
};
/**
......
......@@ -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]);
......
......@@ -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;
......
......@@ -318,9 +318,6 @@ body.path-question-type {
padding-left: 30px;
}
}
.qtype_multichoice_clearchoice input {
display: none;
}
.formulation input[type="text"],
.formulation select {
......
......@@ -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;
......
......@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment