From ea697ca8a0c821a18afb43dddf82083c3bfdbcff Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Thu, 5 Jan 2023 22:16:20 +1100 Subject: [PATCH 1/4] MDL-76603 gradingform_rubric: fix roles - set the role of table to none - moved aria-label from element (that doesn't has role="none") to the element that has the radiogroup role - if it's not radiogroup/radio, it is list/listitem - removed aria-label from the rubric table and used caption instead --- grade/grading/form/rubric/renderer.php | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/grade/grading/form/rubric/renderer.php b/grade/grading/form/rubric/renderer.php index dc52ad6374c..6017a553ea6 100644 --- a/grade/grading/form/rubric/renderer.php +++ b/grade/grading/form/rubric/renderer.php @@ -119,7 +119,10 @@ class gradingform_rubric_renderer extends plugin_renderer_base { $criteriontemplate .= html_writer::tag('td', $description, $descriptiontdparams); // Levels table. - $levelsrowparams = array('id' => '{NAME}-criteria-{CRITERION-id}-levels'); + $levelsrowparams = [ + 'id' => '{NAME}-criteria-{CRITERION-id}-levels', + 'aria-label' => get_string('levelsgroup', 'gradingform_rubric'), + ]; // Add radiogroup role only when not previewing or editing. $isradiogroup = !in_array($mode, [ gradingform_rubric_controller::DISPLAY_EDIT_FULL, @@ -127,15 +130,13 @@ class gradingform_rubric_renderer extends plugin_renderer_base { gradingform_rubric_controller::DISPLAY_PREVIEW, gradingform_rubric_controller::DISPLAY_PREVIEW_GRADED, ]); - if ($isradiogroup) { - $levelsrowparams['role'] = 'radiogroup'; - } + $levelsrowparams['role'] = $isradiogroup ? 'radiogroup' : 'list'; $levelsrow = html_writer::tag('tr', $levelsstr, $levelsrowparams); - $levelstableparams = array( + $levelstableparams = [ 'id' => '{NAME}-criteria-{CRITERION-id}-levels-table', - 'aria-label' => get_string('levelsgroup', 'gradingform_rubric') - ); + 'role' => 'none', + ]; $levelsstrtable = html_writer::tag('table', $levelsrow, $levelstableparams); $levelsclass = 'levels'; if (isset($criterion['error_levels'])) { @@ -311,7 +312,11 @@ class gradingform_rubric_renderer extends plugin_renderer_base { } else { $tdattributes['aria-checked'] = 'false'; } + } else { + $tdattributes['role'] = 'listitem'; } + } else { + $tdattributes['role'] = 'listitem'; } $leveltemplateparams = array( @@ -395,11 +400,12 @@ class gradingform_rubric_renderer extends plugin_renderer_base { $rubrictemplate = html_writer::start_tag('div', array('id' => 'rubric-{NAME}', 'class' => 'clearfix gradingform_rubric'.$classsuffix)); // Rubric table. - $rubrictableparams = array( + $rubrictableparams = [ 'class' => 'criteria', 'id' => '{NAME}-criteria', - 'aria-label' => get_string('rubric', 'gradingform_rubric')); - $rubrictable = html_writer::tag('table', $criteriastr, $rubrictableparams); + ]; + $caption = html_writer::tag('caption', get_string('rubric', 'gradingform_rubric'), ['class' => 'sr-only']); + $rubrictable = html_writer::tag('table', $caption . $criteriastr, $rubrictableparams); $rubrictemplate .= $rubrictable; if ($mode == gradingform_rubric_controller::DISPLAY_EDIT_FULL) { $value = get_string('addcriterion', 'gradingform_rubric'); From 27c9eb38a001b47ff0121b25a32d03a84d6d7b0e Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Sun, 15 Jan 2023 06:52:27 +1100 Subject: [PATCH 2/4] MDL-76603 gradingform_rubric: preserve bg colour on hover --- grade/grading/form/rubric/styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/grade/grading/form/rubric/styles.css b/grade/grading/form/rubric/styles.css index 99c9f561428..f60fd60c331 100644 --- a/grade/grading/form/rubric/styles.css +++ b/grade/grading/form/rubric/styles.css @@ -96,10 +96,14 @@ overflow: hidden; } -.gradingform_rubric .criterion.even { +.gradingform_rubric .criterion.even td { background: #f0f0f0; } +.gradingform_rubric .criterion.odd td { + background: white; +} + .gradingform_rubric .criterion .description { min-width: 150px; font-weight: bold; From d6087552d0467630f916e22e6067da8c1570e792 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Thu, 9 Feb 2023 23:01:14 +1100 Subject: [PATCH 3/4] MDL-76603 mod_assign: Move advanced grading grades out of the tables --- mod/assign/classes/output/renderer.php | 18 +++++++------ mod/assign/lang/en/assign.php | 1 + mod/assign/locallib.php | 35 +++++++++++++++----------- mod/assign/renderable.php | 7 +++++- 4 files changed, 39 insertions(+), 22 deletions(-) diff --git a/mod/assign/classes/output/renderer.php b/mod/assign/classes/output/renderer.php index 646414969a2..d87209ec807 100644 --- a/mod/assign/classes/output/renderer.php +++ b/mod/assign/classes/output/renderer.php @@ -448,6 +448,11 @@ class renderer extends \plugin_renderer_base { $o .= \html_writer::table($t); $o .= $this->output->box_end(); + if (!empty($status->gradingcontrollergrade)) { + $o .= $this->output->heading(get_string('gradebreakdown', 'assign'), 4); + $o .= $status->gradingcontrollergrade; + } + $o .= $this->output->container_end(); return $o; } @@ -813,13 +818,6 @@ class renderer extends \plugin_renderer_base { $this->add_table_row_tuple($t, $cell1content, $cell2content, [], $cell2attributes); } - // Grading criteria preview. - if (!empty($status->gradingcontrollerpreview)) { - $cell1content = get_string('gradingmethodpreview', 'assign'); - $cell2content = $status->gradingcontrollerpreview; - $this->add_table_row_tuple($t, $cell1content, $cell2content, [], []); - } - // Last modified. if ($submission) { $cell1content = get_string('timemodified', 'assign'); @@ -860,6 +858,12 @@ class renderer extends \plugin_renderer_base { $o .= \html_writer::table($t); $o .= $this->output->box_end(); + // Grading criteria preview. + if (!empty($status->gradingcontrollerpreview)) { + $o .= $this->output->heading(get_string('gradingmethodpreview', 'assign'), 4); + $o .= $status->gradingcontrollerpreview; + } + $o .= $this->output->container_end(); return $o; } diff --git a/mod/assign/lang/en/assign.php b/mod/assign/lang/en/assign.php index cf44e3b3b68..75eacf44fb3 100644 --- a/mod/assign/lang/en/assign.php +++ b/mod/assign/lang/en/assign.php @@ -284,6 +284,7 @@ $string['gradedby'] = 'Graded by'; $string['gradedfollowupsubmit'] = 'Graded - follow-up submission received'; $string['gradedon'] = 'Graded on'; $string['gradebelowzero'] = 'Grade must be greater than or equal to zero.'; +$string['gradebreakdown'] = 'Grade breakdown'; $string['gradeabovemaximum'] = 'Grade must be less than or equal to {$a}.'; $string['gradelocked'] = 'This grade is locked or overridden in the gradebook.'; $string['gradeoutof'] = 'Grade out of {$a}'; diff --git a/mod/assign/locallib.php b/mod/assign/locallib.php index 328e15a20ab..1eee0294663 100644 --- a/mod/assign/locallib.php +++ b/mod/assign/locallib.php @@ -5570,15 +5570,19 @@ class assign { $grader = null; $gradingmanager = get_grading_manager($this->get_context(), 'mod_assign', 'submissions'); + $gradingcontrollergrade = ''; if ($hasgrade) { if ($controller = $gradingmanager->get_active_controller()) { $menu = make_grades_menu($this->get_instance()->grade); $controller->set_grade_range($menu, $this->get_instance()->grade > 0); - $gradefordisplay = $controller->render_grade($PAGE, - $grade->id, - $gradingitem, - $gradebookgrade->str_long_grade, - $cangrade); + $gradingcontrollergrade = $controller->render_grade( + $PAGE, + $grade->id, + $gradingitem, + '', + $cangrade + ); + $gradefordisplay = $gradebookgrade->str_long_grade; } else { $gradefordisplay = $this->display_grade($gradebookgrade->grade, false); } @@ -5605,15 +5609,18 @@ class assign { if ($grade) { \mod_assign\event\feedback_viewed::create_from_grade($this, $grade)->trigger(); } - $feedbackstatus = new assign_feedback_status($gradefordisplay, - $gradeddate, - $grader, - $this->get_feedback_plugins(), - $grade, - $this->get_course_module()->id, - $this->get_return_action(), - $this->get_return_params(), - $viewfullnames); + $feedbackstatus = new assign_feedback_status( + $gradefordisplay, + $gradeddate, + $grader, + $this->get_feedback_plugins(), + $grade, + $this->get_course_module()->id, + $this->get_return_action(), + $this->get_return_params(), + $viewfullnames, + $gradingcontrollergrade + ); // Show the grader's identity if 'Hide Grader' is disabled or has the 'Show Hidden Grader' capability. $showgradername = ( diff --git a/mod/assign/renderable.php b/mod/assign/renderable.php index c6240963526..738e8659cd2 100644 --- a/mod/assign/renderable.php +++ b/mod/assign/renderable.php @@ -291,6 +291,8 @@ class assign_feedback_status implements renderable { public $returnparams = array(); /** @var bool canviewfullnames */ public $canviewfullnames = false; + /** @var string gradingcontrollergrade The grade information rendered by a grade controller */ + public $gradingcontrollergrade; /** * Constructor @@ -303,6 +305,7 @@ class assign_feedback_status implements renderable { * @param string $returnaction The action required to return to this page * @param array $returnparams The list of params required to return to this page * @param bool $canviewfullnames + * @param string $gradingcontrollergrade The grade information rendered by a grade controller */ public function __construct($gradefordisplay, $gradeddate, @@ -312,7 +315,8 @@ class assign_feedback_status implements renderable { $coursemoduleid, $returnaction, $returnparams, - $canviewfullnames) { + $canviewfullnames, + $gradingcontrollergrade = '') { $this->gradefordisplay = $gradefordisplay; $this->gradeddate = $gradeddate; $this->grader = $grader; @@ -322,6 +326,7 @@ class assign_feedback_status implements renderable { $this->returnaction = $returnaction; $this->returnparams = $returnparams; $this->canviewfullnames = $canviewfullnames; + $this->gradingcontrollergrade = $gradingcontrollergrade; } } From 05d383cdffd5c041ac056827d9a4e8e79bba038b Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Fri, 10 Feb 2023 05:23:23 +1100 Subject: [PATCH 4/4] 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) --- grade/grading/form/guide/js/guideeditor.js | 2 +- grade/grading/form/rubric/edit_form.php | 2 +- grade/grading/form/rubric/js/rubriceditor.js | 2 +- grade/grading/form/rubric/styles.css | 30 ++++++++++---------- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/grade/grading/form/guide/js/guideeditor.js b/grade/grading/form/guide/js/guideeditor.js index 1175aea84e3..a0d6170ae76 100644 --- a/grade/grading/form/guide/js/guideeditor.js +++ b/grade/grading/form/guide/js/guideeditor.js @@ -80,7 +80,7 @@ M.gradingform_guideeditor.editmode = function(el, editmode) { if (editmode && !ta.hasClass('hiddenelement')) { return; } - var pseudotablink = '', + var pseudotablink = '', taplain = ta.next('.plainvalue'), tbplain = null, tb = el.one('.score input[type=text]') diff --git a/grade/grading/form/rubric/edit_form.php b/grade/grading/form/rubric/edit_form.php index 9b3d795fea5..5ba5c9fd238 100644 --- a/grade/grading/form/rubric/edit_form.php +++ b/grade/grading/form/rubric/edit_form.php @@ -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(); diff --git a/grade/grading/form/rubric/js/rubriceditor.js b/grade/grading/form/rubric/js/rubriceditor.js index 7b84e2979e2..1b13b2a335b 100644 --- a/grade/grading/form/rubric/js/rubriceditor.js +++ b/grade/grading/form/rubric/js/rubriceditor.js @@ -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 = '', + var pseudotablink = '', taplain = ta.get('parentNode').one('.plainvalue'), tbplain = null, tb = el.one('.score input[type=text]') diff --git a/grade/grading/form/rubric/styles.css b/grade/grading/form/rubric/styles.css index f60fd60c331..4002d6bbd62 100644 --- a/grade/grading/form/rubric/styles.css +++ b/grade/grading/form/rubric/styles.css @@ -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; }