MDL-68355 gradingform_guide: Fix accessibility issues
[moodle.git] / grade / grading / form / guide / templates / grades / grader / gradingpanel.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template gradingform_rubric/grades/grader/gradingpanel
20     Classes required for JS:
21     * none
23     Data attributes required for JS:
24     * none
26     Context variables required for this template:
27     * instanceid: Instance of the module this grading form belongs too
28     * criterion: A gradeable item in the Marking Guide
29     * name: Name of the gradeable item
30     * id: ID of the gradeable item
31     * description: Description shown to students for this gradeable item
32     * descriptionmarkers: Description shown to teachers for this gradeable item
33     * maxscore: Max allowable assinable points for this item
34     * score: Current score assigned to the learner for this item
35     * remark: Text input for the teacher to relay to the student
36     * hascomments: Flag for frequently used comments
37     * comments: Array of frequently used comments
38     * description: Description of a frequently used comment
40     Example context (json):
41     {
42         "instanceid": "42",
43         "criterion": [
44             {
45                 "name": "Motivation",
46                 "id": 13,
47                 "description": "Show your motivation to rock climbing",
48                 "descriptionmarkers": "Does the student show interest in climbing?",
49                 "maxscore": 37,
50                 "score": 20,
51                 "remark": "That's great!",
52                 "hascomments": true,
53                 "comments": [
54                     {"description": "Great work!"},
55                     {"description": "You should really try it before jumping to conclusions"}
56                 ]
57             }
58         ]
59     }
60 }}
61 <form id="gradingform_guide-{{uniqid}}">
62   <input type="hidden" name="instanceid" value="{{instanceid}}">
63   {{#criterion}}
64     <div class="mb-3 criterion" data-gradingform-guide-role="criterion">
65       <div class="d-flex align-items-center">
66         <h5 class="description font-weight-bold mb-0">{{name}}</h5>
67         <button
68             class="btn btn-link px-1"
69             aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
70             aria-expanded="false"
71             data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
72             data-toggle="collapse"
73             type="button"
74           >
75             {{# pix }} info, gradingform_guide {{/ pix }}
76             <span class="sr-only">{{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}</span>
77         </button>
78         <button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 font-weight-bold mb-0 ml-auto"
79                 type="button"
80                 data-toggle="collapse"
81                 data-target="#criteria-{{id}}"
82                 aria-expanded="true"
83                 aria-controls="criteria-{{id}}">
84                 <span class="collapsed-icon">
85                     {{#pix}} t/collapsed, core {{/pix}}
86                     <span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span>
87                 </span>
88                 <span class="expanded-icon">
89                     {{#pix}} t/expanded, core {{/pix}}
90                     <span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span>
91                 </span>
92         </button>
93       </div>
94       <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-description">
95           <div class="border p-3 mb-3 bg-white rounded">
96               {{{description}}}
97               {{#descriptionmarkers}}
98                   <hr>
99                   {{{descriptionmarkers}}}
100               {{/descriptionmarkers}}
101           </div>
102       </div>
103       <div class="collapse show" id="criteria-{{id}}">
104         <div class="form-group">
105           <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
106           <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
107             id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
108             aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score"
109             min="0" max="{{maxscore}}"
110             aria-label="{{#str}}scoreforcriterion, gradingform_guide, {{name}}{{/str}}">
111           <span id="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-hidden="true" class="sr-only">{{!
112             }}{{#str}}score_help, gradingform_guide, { "criterion":  {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}}
113           </span>
114         </div>
115         <div class="form-group ">
116           <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
117           <div class="input-group mb-3 form-inset form-inset-right">
118             <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
119                 id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
120                 aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
121                 aria-label="{{#str}}additionalcommentsforcriterion, gradingform_guide, {{name}}{{/str}}"
122                 data-gradingform-guide-role="remark"
123                 rows="2"
124                 data-max-rows="5"
125                 data-auto-rows
126                 >{{remark}}</textarea>
127             {{#hascomments}}
128               <button
129                 class="btn btn-icon form-inset-item icon-no-margin p-0 mt-1 mr-1 text-reset collapsed"
130                 aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
131                 aria-expanded="false"
132                 data-toggle="collapse"
133                 data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
134                 type="button"
135               >
136                   {{#pix}}plus, gradingform_guide{{/pix}}
137                   <span class="sr-only">{{#str}}commentpickerforcriterion, gradingform_guide, {{name}}{{/str}}</span>
138               </button>
139             {{/hascomments}}
140           </div>
141           {{#hascomments}}
142             <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
143               <div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
144                   <h6>{{#str}}comments, gradingform_guide{{/str}}</h6>
145                 <div class="list-group">
146                   {{#comments}}
147                     <button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
148                   {{/comments}}
149                 </div>
150               </div>
151             </div>
152           {{/hascomments}}
153           <span id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" aria-hidden="true" class="sr-only">{{#str}}remark_help, gradingform_guide{{/str}}</span>
154         </div>
155       </div>
156     </div>
157   {{/criterion}}
158 </form>
159 {{#js}}
160 require(['gradingform_guide/grades/grader/gradingpanel/comments', 'core/auto_rows'], function(Comments, AutoRows) {
161   Comments.init('gradingform_guide-{{uniqid}}');
162   AutoRows.init(document.getElementById('gradingform_guide-{{uniqid}}'));
163 });
164 {{/js}}