MDL-76603 gradingforms: Some A11y fixes on editing form

- Use span instead of dummy input elements because form elements need a
  label
- Sufficient size for target is at least 24px by 24px (Success Criteria
  2.5.8)
This commit is contained in:
Shamim Rezaie
2023-03-10 10:08:42 +08:00
committed by Jun Pataleta
parent 48b7dc597b
commit ae197c027a
4 changed files with 18 additions and 18 deletions
+1 -1
View File
@@ -80,7 +80,7 @@ M.gradingform_guideeditor.editmode = function(el, editmode) {
if (editmode && !ta.hasClass('hiddenelement')) {
return;
}
var pseudotablink = '<input type="text" size="1" class="pseudotablink"/>',
var pseudotablink = '<span class="pseudotablink" tabindex="0"></span>',
taplain = ta.next('.plainvalue'),
tbplain = null,
tb = el.one('.score input[type=text]')
+1 -1
View File
@@ -66,7 +66,7 @@ class gradingform_rubric_editrubric extends moodleform {
$form->addElement('select', 'status', get_string('rubricstatus', 'gradingform_rubric'), $choices)->freeze();
// rubric editor
$element = $form->addElement('rubriceditor', 'rubric', get_string('rubric', 'gradingform_rubric'));
$form->addElement('rubriceditor', 'rubric', get_string('rubric', 'gradingform_rubric'));
$form->setType('rubric', PARAM_RAW);
$buttonarray = array();
+1 -1
View File
@@ -68,7 +68,7 @@ M.gradingform_rubriceditor.editmode = function(el, editmode, focustb) {
var ta = el.one('textarea')
if (!editmode && ta.hasClass('hiddenelement')) return;
if (editmode && !ta.hasClass('hiddenelement')) return;
var pseudotablink = '<input type="text" size="1" class="pseudotablink"/>',
var pseudotablink = '<span class="pseudotablink" tabindex="0"></span>',
taplain = ta.get('parentNode').one('.plainvalue'),
tbplain = null,
tb = el.one('.score input[type=text]')
+15 -15
View File
@@ -157,36 +157,36 @@
}
.gradingform_rubric.editor .criterion .controls .delete input {
width: 12px;
height: 12px;
background: transparent url([[pix:t/delete]]) no-repeat center top;
width: 24px;
height: 24px;
background: transparent url([[pix:t/delete]]) no-repeat center;
margin: .3em .3em 0 .3em;
}
.gradingform_rubric.editor .criterion .controls .duplicate input {
width: 12px;
height: 12px;
background: transparent url([[pix:t/copy]]) no-repeat center top;
width: 24px;
height: 24px;
background: transparent url([[pix:t/copy]]) no-repeat center;
margin: .3em .3em 0 .3em;
}
.gradingform_rubric.editor .levels .level .delete input {
width: 12px;
height: 16px;
background: transparent url([[pix:t/delete]]) no-repeat center center;
width: 24px;
height: 24px;
background: transparent url([[pix:t/delete]]) no-repeat center;
}
.gradingform_rubric.editor .moveup input {
width: 12px;
height: 12px;
background: transparent url([[pix:t/up]]) no-repeat center top;
width: 24px;
height: 24px;
background: transparent url([[pix:t/up]]) no-repeat center;
margin: .3em .3em 0 .3em;
}
.gradingform_rubric.editor .movedown input {
width: 12px;
height: 12px;
background: transparent url([[pix:t/down]]) no-repeat center top;
width: 24px;
height: 24px;
background: transparent url([[pix:t/down]]) no-repeat center;
margin: .3em .3em 0 .3em;
}