mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-22 00:42:54 +02:00
Code Issues Projects Releases Wiki Activity

MDL-69116 qtype_multichoice: accessibility improvement

Browse Source 
- 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
This commit is contained in:
Shamim Rezaie 2020-08-06 01:32:17 +10:00
parent b0af84698b
commit 8739f218a9
4 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
question/type/multichoice/amd/build/clearchoice.min.js vendored
View File

@ -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

2
question/type/multichoice/amd/build/clearchoice.min.js.map
View File

File diff suppressed because one or more lines are too long

6
question/type/multichoice/amd/src/clearchoice.js
View File

@ -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);
});

15
question/type/multichoice/renderer.php
View File

@ -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',