From ae197c027affd52ac197a89b528c0fdb1ca4e1cb Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Fri, 10 Feb 2023 05:23:23 +1100
Subject: [PATCH] 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 = '<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]')
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 = '<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]')
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;
 }