Skip to content

Commit a77b6a2

Browse files
author
Amir Qayyum khan
committed
fix accessibility issues in code
1 parent 1a0b28d commit a77b6a2

File tree

3 files changed

+71
-62
lines changed

3 files changed

+71
-62
lines changed

‎edx_sga/static/js/src/edx_sga.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,20 @@ function StaffGradedAssignmentXBlock(runtime, element) {
4343
return;
4444
}
4545
}
46+
$(content).find(".upload").attr("role", "progressbar");
47+
$(content).find(".upload").attr("aria-valuemax", "100");
48+
$(content).find(".upload").attr("aria-valuemin", "0");
4649
data.submit();
4750
});
4851
},
4952
progressall: function(e, data) {
5053
var percent = parseInt(data.loaded / data.total * 100, 10);
54+
5155
$(content).find(".upload").text(
5256
"Uploading... " + percent + "%");
57+
$(content).find(".upload").attr("aria-valuenow" , percent);
58+
$(content).find(".upload").attr("aria-valuetext" ,
59+
"Uploading... " + percent + "%");
5360
},
5461
fail: function(e, data) {
5562
/**

‎edx_sga/templates/staff_graded_assignment/edit.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{% load i18n %}
22

3-
<div id="staff-graded-assignment-edit">
4-
<ul class="list-input settings-list">
3+
<div id="staff-graded-assignment-edit" role="form">
4+
<div class="list-input settings-list">
55
{% for field, value, validator in fields %}
6-
<li class="field comp-setting-entry metadata_entry">
6+
<div class="field comp-setting-entry metadata_entry">
77
<div class="wrapper-comp-setting">
8-
<label class="label setting-label"
8+
<label class="label setting-label"
99
for="{{ field.name }}_input">{{ field.display_name }}</label>
10-
<input class="input setting-input" type="text"
11-
id="{{ field.name }}_input" name="{{ field.name}}"
10+
<input class="input setting-input" type="text" aria-describedby="{{ field.name }}_hint"
11+
id="{{ field.name }}_input" name="{{ field.name}}"
1212
value="{{ value }}" data-validator="{{ validator }}"/>
1313
</div>
14-
<span class="tip setting-help">{{ field.help }}</span>
15-
</li>
14+
<span id="{{ field.name }}_hint" class="tip setting-help">{{ field.help }}</span>
15+
</div>
1616
{% endfor %}
17-
</ul>
17+
</div>
1818
</div>
1919

2020
<script type="application/javascript">
21-
$("ul.action-modes").html(' <li class="view-button sga_editor_tab">{% trans "Settings" %}</li>')
21+
$("ul.action-modes").html(' <li class="view-button sga_editor_tab" aria-label="settings">{% trans "Settings" %}</li>')
22+
$("h2.modal-window-title").attr("tabindex","0");
2223
</script>

‎edx_sga/templates/staff_graded_assignment/show.html‎

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,46 @@
11
{% load i18n %}
22

33
<div class="sga-block" data-state="{{ student_state }}" data-max-size="{{ max_file_size }}"
4-
data-staff="{{ is_course_staff }}">
4+
data-staff="{{ is_course_staff }}" role="article" aria-describedby="title">
55
<script type="text/template" id="sga-tmpl">
66
<% if (display_name) { %>
7-
<b><%= display_name %></b>
7+
<b id="title"><%= display_name %></b>
88
<% } %>
99
<% if (uploaded) { %>
10-
<p><b>File uploaded</b>
11-
<a href="<%= downloadUrl %>"><%= uploaded.filename %></a></p>
10+
<br/>
11+
<label for="file_uploaded"><b>File uploaded</b></label>
12+
<a href="<%= downloadUrl %>" role="link" id="file_uploaded"><%= uploaded.filename %></a>
1213
<% } else { %>
13-
<p>No file has been uploaded.</p>
14+
<p tabindex="0">No file has been uploaded.</p>
1415
<% } %>
1516
<% if (graded) { %>
16-
<p>Your score is <%= graded.score %> / <%= max_score %><br/>
17+
<p><span tabindex="0">Your score is <%= graded.score %> / <%= max_score %></span><br/>
1718
<% if (graded.comment) { %>
18-
<b>Instructor comment</b> <%= graded.comment %>
19+
<b tabindex="0">Instructor comment</b> <%= graded.comment %>
1920
<% } %>
2021
<% if (annotated) { %><br/>
21-
<b>Annotated file from instructor</b>
22-
<a href="<%= annotatedUrl %>"><%= annotated.filename %></a>
22+
<b id="annotated_file">Annotated file from instructor</b>
23+
<a href="<%= annotatedUrl %>" role="link" aria-describedby="annotated_file"><%= annotated.filename %></a>
2324
<% } %>
2425
</p>
2526
<% } else if (uploaded) { %>
26-
{% trans "This assignment has not yet been graded." %}
27+
<p tabindex="0">{% trans "This assignment has not yet been graded." %}</p>
2728
<% } %>
2829
<% if (upload_allowed) { %>
2930
<p>
3031
<% if (uploaded) { %>
31-
{% trans "Upload a different file" %}
32+
<span id="upload_lable">{% trans "Upload a different file" %}</span>
3233
<% } else { %>
33-
{% trans "Upload your assignment" %}
34+
<span id="upload_lable">{% trans "Upload your assignment" %}</span>
3435
<% } %>
35-
<div class="upload">
36+
<div class="upload" aria-describedby="upload_lable" aria-live="polite">
3637
<input class="fileupload" type="file" name="assignment"/>
37-
<button>Select a file</button>
38+
<button role="button">Select a file</button>
3839
</div>
3940
</p>
4041
<% } %>
4142
<% if (error) { %>
42-
<p class="error"><%= error %></p>
43+
<p class="error" tabindex="0"><%= error %></p>
4344
<% } %>
4445
</script>
4546

@@ -48,30 +49,30 @@
4849

4950
{% if is_course_staff %}
5051
<script type="text/template" id="sga-grading-tmpl">
51-
<table class="gridtable">
52-
<tr>
53-
<th>Username</th>
54-
<th>Name</th>
55-
<th>Filename</th>
56-
<th>Uploaded</th>
57-
<th>Grade</th>
58-
<th>Instructor's comments</th>
59-
<th>Annotated</th>
52+
<table class="gridtable" role="grid">
53+
<tr role="row">
54+
<th role="columnheader">Username</th>
55+
<th role="columnheader">Name</th>
56+
<th role="columnheader">Filename</th>
57+
<th role="columnheader">Uploaded</th>
58+
<th role="columnheader">Grade</th>
59+
<th role="columnheader">Instructor's comments</th>
60+
<th role="columnheader">Annotated</th>
6061
</tr>
6162
<% for (var i = 0; i < assignments.length; i++) { %>
6263
<% var assignment = assignments[i]; %>
63-
<tr id="row-<%= assignment.module_id %>">
64-
<td><%= assignment.username %></td>
65-
<td><%= assignment.fullname %></td>
66-
<td>
64+
<tr id="row-<%= assignment.module_id %>" role="row">
65+
<td role="gridcell" tabindex="0"><%= assignment.username %></td>
66+
<td role="gridcell" tabindex="0"><%= assignment.fullname %></td>
67+
<td role="gridcell" tabindex="0">
6768
<% if (assignment.filename) { %>
6869
<a href="<%= downloadUrl %>?student_id=<%= assignment.student_id %>">
6970
<%= assignment.filename %>
7071
</a>
7172
<% } %>
7273
</td>
73-
<td><%= assignment.timestamp %></td>
74-
<td>
74+
<td role="gridcell" tabindex="0"><%= assignment.timestamp %></td>
75+
<td role="gridcell" tabindex="0">
7576
<% if (assignment.score !== null) { %>
7677
<%= assignment.score %> /
7778
<%= max_score %>
@@ -80,8 +81,8 @@
8081
<% } %>
8182
<% } %>
8283
</td>
83-
<td><%= assignment.comment %></td>
84-
<td>
84+
<td role="gridcell" tabindex="0"><%= assignment.comment %></td>
85+
<td role="gridcell" tabindex="0">
8586
<% if (assignment.annotated) { %>
8687
<a href="<%= annotatedUrl %>?module_id=<%= assignment.module_id %>">
8788
<%= assignment.annotated %>
@@ -90,7 +91,7 @@
9091
</td>
9192
<td>
9293
<% if (assignment.may_grade) { %>
93-
<a class="enter-grade-button button" href="#{{ id }}-enter-grade">
94+
<a class="enter-grade-button button" href="#{{ id }}-enter-grade" role="button">
9495
<% if (assignment.needs_approval) { %>
9596
{% trans "Approve grade" %}
9697
<% } else { %>
@@ -100,24 +101,24 @@
100101
<% } %>
101102
</td>
102103
<td>
103-
<div class="upload">
104+
<div class="upload" aria-live="polite">
104105
<input class="fileupload" type="file" name="annotated"/>
105-
<button>Upload annotated file</button>
106+
<button role="button">Upload annotated file</button>
106107
</div>
107108
</td>
108109
</tr>
109110
<% } %>
110111
</table>
111112
</script>
112113

113-
<div aria-hidden="true" class="wrap-instructor-info">
114-
<a class="instructor-info-action" id="grade-submissions-button"
114+
<div class="wrap-instructor-info">
115+
<a class="instructor-info-action" id="grade-submissions-button" role="link" tabindex="0" aria-expanded="true"
115116
href="#{{ id }}-grade">{% trans "Grade Submissions" %}</a>
116-
<a class="instructor-info-action" id="staff-debug-info-button"
117+
<a class="instructor-info-action" id="staff-debug-info-button" role="link" tabindex="0" aria-expanded="true"
117118
href="#{{ id }}-debug">{% trans "Staff Debug Info" %}</a>
118119
</div>
119120

120-
<section aria-hidden="true" class="modal staff-modal" id="{{ id }}-grade" style="height: 75%">
121+
<section class="modal staff-modal" id="{{ id }}-grade" style="height: 75%">
121122
<div class="inner-wrapper" style="color: black; overflow: auto;">
122123
<header><h2><span class="display_name">{{ display_name }}</span> - {% trans "Staff Graded Assignment" %}</h2></header>
123124
<br/>
@@ -127,32 +128,32 @@
127128
</div>
128129
</section>
129130

130-
<section aria-hidden="true" class="modal staff-modal"
131+
<section class="modal staff-modal"
131132
style="height: 80%" id="{{ id }}-debug">
132133
<div class="inner-wrapper" style="color: black">
133-
<header><h2>{% trans "Staff Debug" %}</h2></header>
134+
<header role="banner"><h2 role="heading">{% trans "Staff Debug" %}</h2></header>
134135
<br/>
135-
<div class="staff_info" style="display: block; white-space: normal">
136-
is_released = {{ is_released }}<br/>
137-
location = {{ location }}<br/>
136+
<div class="staff_info" style="display: block; white-space: normal" aria-readonly="true">
137+
<span tabindex="0">is_released = {{ is_released }}</span> <br/>
138+
<span tabindex="0">location = {{ location }}</span><br/>
138139
<br/>
139-
<table summary="${_('Module Fields')}">
140-
<tr><th>{% trans "Module Fields" %}</th></tr>
140+
<table summary="${_('Module Fields')}" role="grid">
141+
<tr role="row"><th role="columnheader" tabindex="0">{% trans "Module Fields" %}</th></tr>
141142
{% for name, field in fields %}
142-
<tr>
143-
<td>{{name}}</td>
144-
<td>
145-
<pre style="display:inline-block; margin: 0;">{{field}}</pre>
143+
<tr role="row">
144+
<td role="gridcell" tabindex="0">{{name}}</td>
145+
<td role="gridcell">
146+
<pre style="display:inline-block; margin: 0;" tabindex="0">{{field}}</pre>
146147
</td>
147148
</tr>
148149
{% endfor %}
149150
</table><br/>
150-
category = {{category}}
151+
<span tabindex="0">category = {{category}}</span>
151152
</div>
152153
</div>
153154
</section>
154155

155-
<section aria-hidden="true" class="modal grade-modal" id="{{ id }}-enter-grade">
156+
<section class="modal grade-modal" id="{{ id }}-enter-grade">
156157
<div class="inner-wrapper" style="color: black">
157158
<header><h2>
158159
{% trans "Enter Grade" %}

0 commit comments

Comments
 (0)