MDL-52661 gradingform_gudie: Accessibility fixes for marking guide

grade/grading/form/guide/amd/src/comment_chooser.js

@@ -0,0 +1,139 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * AMD code for the frequently used comments chooser for the marking guide grading form.
+ *
+ * @module     gradingform_guide/comment_chooser
+ * @class      comment_chooser
+ * @package    core
+ * @copyright  2015 Jun Pataleta <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+  */
+define(['jquery', 'core/templates', 'core/notification', 'core/yui'], function ($, templates, notification) {
+
+    // Private variables and functions.
+
+    return /** @alias module:gradingform_guide/comment_chooser */ {
+        // Public variables and functions.
+        /**
+         * Initialises the module.
+         *
+         * Basically, it performs the binding and handling of the button click event for
+         * the 'Insert frequently used comment' button.
+         *
+         * @param criterionId The criterion ID.
+         * @param buttonId The element ID of the button which the handler will be bound to.
+         * @param remarkId The element ID of the remark text area where the text of the selected comment will be copied to.
+         * @param commentOptions The array of frequently used comments to be used as options.
+         */
+        initialise: function (criterionId, buttonId, remarkId, commentOptions) {
+            var chooserDialog;
+
+            /**
+             * Display the chooser dialog using the compiled HTML from the mustache template
+             * and binds onclick events for the generated comment options.
+             *
+             * @param compiledSource The compiled HTML from the mustache template
+             * @param comments Array containing comments.
+             */
+            function displayChooserDialog(compiledSource, comments) {
+                var titleLabel = '<label>' + M.util.get_string('insertcomment', 'gradingform_guide') + '</label>';
+                var cancelButtonId = 'comment-chooser-' + criterionId + '-cancel';
+                var cancelButton = '<button id="' + cancelButtonId + '">' + M.util.get_string('cancel', 'moodle') + '</button>';
+
+                if (typeof chooserDialog === 'undefined') {
+                    // Set dialog's body content.
+                    chooserDialog = new M.core.dialogue({
+                        modal: true,
+                        headerContent: titleLabel,
+                        bodyContent: compiledSource,
+                        footerContent: cancelButton,
+                        focusAfterHide: '#' + remarkId,
+                        id: "comments-chooser-dialog-" + criterionId
+                    });
+
+                    // Bind click event to the cancel button.
+                    $("#" + cancelButtonId).click(function() {
+                        if (typeof chooserDialog !== 'undefined') {
+                            chooserDialog.hide();
+                        }
+                    });
+
+                    // Loop over each comment item and bind click events.
+                    $.each(comments, function (index, comment) {
+                        var commentOptionId = '#comment-option-' + criterionId + '-' + comment.id;
+
+                        // Delegate click event for the generated option link.
+                        $(commentOptionId).click(function () {
+                            var remarkTextArea = $('#' + remarkId);
+                            var remarkText = remarkTextArea.val();
+
+                            // Add line break if the current value of the remark text is not empty.
+                            if ($.trim(remarkText) !== '') {
+                                remarkText += '\n';
+                            }
+                            remarkText += comment.description;
+
+                            remarkTextArea.val(remarkText);
+
+                            if (typeof chooserDialog !== 'undefined') {
+                                chooserDialog.hide();
+                            }
+                        });
+
+                        // Handle keypress on list items.
+                        $(document).off('keypress', commentOptionId).on('keypress', commentOptionId, function () {
+                            var keyCode = event.which || event.keyCode;
+
+                            // Enter or space key.
+                            if (keyCode == 13 || keyCode == 32) {
+                                // Trigger click event.
+                                $(commentOptionId).click();
+                            }
+                        });
+                    });
+                }
+
+                // Show dialog.
+                chooserDialog.show();
+            }
+
+            /**
+             * Generates the comments chooser dialog from the grading_form/comment_chooser mustache template.
+             */
+            function generateCommentsChooser() {
+                // Template context.
+                var context = {
+                    criterionId: criterionId,
+                    comments: commentOptions
+                };
+
+                // Render the template and display the comment chooser dialog.
+                templates.render('gradingform_guide/comment_chooser', context)
+                    .done(function (compiledSource) {
+                        displayChooserDialog(compiledSource, commentOptions);
+                    })
+                    .fail(notification.exception);
+            }
+
+            // Bind click event for the comments chooser button.
+            $("#" + buttonId).click(function (e) {
+                e.preventDefault();
+                generateCommentsChooser();
+            });
+        }
+    };
+});

grade/grading/form/guide/edit_form.php

@@ -53,7 +53,7 @@ public function definition() {
         // Name.
         $form->addElement('text', 'name', get_string('name', 'gradingform_guide'),
             array('size' => 52, 'maxlength' => 255));
-        $form->addRule('name', get_string('required'), 'required');
+        $form->addRule('name', get_string('required'), 'required', null, 'client');
         $form->setType('name', PARAM_TEXT);
         $form->addRule('name', null, 'maxlength', 255, 'client');
 

grade/grading/form/guide/guideeditor.php

@@ -137,7 +137,7 @@ public function toHtml() {
             $html .= $renderer->display_regrade_confirmation($this->getName(), $this->regradeconfirmation, $data['regrade']);
         }
         if ($this->validationerrors) {
-            $html .= $renderer->notification($this->validationerrors, 'error');
+            $html .= html_writer::div($renderer->notification($this->validationerrors, 'error'), '', array('role' => 'alert'));
         }
         $html .= $renderer->display_guide($data['criteria'], $data['comments'], $data['options'], $mode, $this->getName());
         return $html;

grade/grading/form/guide/js/guideeditor.js

@@ -168,14 +168,15 @@ M.gradingform_guideeditor.buttonclick = function(e, confirmed) {
         return;
     }
     // prepare the id of the next inserted criterion
-
+    var elements_str;
     if (section == 'criteria') {
         elements_str = '#guide-'+name+' .criteria .criterion'
     } else if (section == 'comments') {
         elements_str = '#guide-'+name+' .comments .criterion'
     }
+    var newid = 0;
     if (action == 'addcriterion' || action == 'addcomment') {
-        var newid = M.gradingform_guideeditor.calculatenewid(elements_str)
+        newid = M.gradingform_guideeditor.calculatenewid(elements_str);
     }
     var dialog_options = {
         'scope' : this,
@@ -199,7 +200,14 @@ M.gradingform_guideeditor.buttonclick = function(e, confirmed) {
         M.gradingform_guideeditor.addhandlers();
         M.gradingform_guideeditor.disablealleditors()
         M.gradingform_guideeditor.assignclasses(elements_str)
-        //M.gradingform_guideeditor.editmode(Y.one('#guide-'+name+' #'+name+'-'+section+'-NEWID'+newid+'-shortname'),true)
+
+        // Enable edit mode of the newly added criterion/comment entry.
+        var inputTarget = 'shortname';
+        if (action == 'addcomment') {
+            inputTarget = 'description';
+        }
+        var inputTargetId = '#guide-' + name + ' #' + name + '-' + section + '-NEWID' + newid + '-' + inputTarget;
+        M.gradingform_guideeditor.editmode(Y.one(inputTargetId), true);
     } else if (chunks.length == 4 && action == 'moveup') {
         // MOVE UP
         el = Y.one('#'+name+'-'+section+'-'+chunks[2])

grade/grading/form/guide/lang/en/gradingform_guide.php

@@ -31,19 +31,21 @@
 $string['clicktocopy'] = 'Click to copy this text into the criteria feedback';
 $string['clicktoedit'] = 'Click to edit';
 $string['clicktoeditname'] = 'Click to edit criterion name';
+$string['comment'] = 'Comment';
 $string['comments'] = 'Frequently used comments';
 $string['commentsdelete'] = 'Delete comment';
 $string['commentsempty'] = 'Click to edit comment';
 $string['commentsmovedown'] = 'Move down';
 $string['commentsmoveup'] = 'Move up';
 $string['confirmdeletecriterion'] = 'Are you sure you want to delete this item?';
 $string['confirmdeletelevel'] = 'Are you sure you want to delete this level?';
-$string['criterion'] = 'Criterion';
+$string['criterion'] = 'Criterion name';
 $string['criteriondelete'] = 'Delete criterion';
 $string['criterionempty'] = 'Click to edit criterion';
 $string['criterionmovedown'] = 'Move down';
 $string['criterionmoveup'] = 'Move up';
 $string['criterionname'] = 'Criterion name';
+$string['criterionremark'] = '{$a} criterion remark';
 $string['definemarkingguide'] = 'Define marking guide';
 $string['description'] = 'Description';
 $string['descriptionmarkers'] = 'Description for Markers';
@@ -57,13 +59,15 @@
 $string['err_shortnametoolong'] = 'Criterion name must be less than 256 characters';
 $string['err_scoreinvalid'] = 'The score given to {$a->criterianame} is not valid, the max score is: {$a->maxscore}';
 $string['gradingof'] = '{$a} grading';
+$string['guide'] = 'Marking guide';
 $string['guidemappingexplained'] = 'WARNING: Your marking guide has a maximum grade of <b>{$a->maxscore} points</b> but the maximum grade set in your activity is {$a->modulegrade}  The maximum score set in your marking guide will be scaled to the maximum grade in the module.<br />
     Intermediate scores will be converted respectively and rounded to the nearest available grade.';
 $string['guidenotcompleted'] = 'Please provide a valid grade for each criterion';
 $string['guideoptions'] = 'Marking guide options';
 $string['guidestatus'] = 'Current marking guide status';
 $string['hidemarkerdesc'] = 'Hide marker criterion descriptions';
 $string['hidestudentdesc'] = 'Hide student criterion descriptions';
+$string['insertcomment'] = 'Insert frequently used comment';
 $string['maxscore'] = 'Maximum mark';
 $string['name'] = 'Name';
 $string['needregrademessage'] = 'The marking guide definition was changed after this student had been graded. The student can not see this marking guide until you check the marking guide and update the grade.';

grade/grading/form/guide/lib.php

@@ -951,7 +951,7 @@ public function render_grading_element($page, $gradingformelement) {
         $currentinstance = $this->get_current_instance();
         if ($currentinstance && $currentinstance->get_status() == gradingform_instance::INSTANCE_STATUS_NEEDUPDATE) {
             $html .= html_writer::tag('div', get_string('needregrademessage', 'gradingform_guide'),
-                array('class' => 'gradingform_guide-regrade'));
+                array('class' => 'gradingform_guide-regrade', 'role' => 'alert'));
         }
         $haschanges = false;
         if ($currentinstance) {