Skip to content

Commit

Permalink
fix accessibility issues in code
Browse files Browse the repository at this point in the history
  • Loading branch information
Amir Qayyum khan committed Apr 29, 2015
1 parent bf7914c commit cfa465b
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 64 deletions.
10 changes: 8 additions & 2 deletions edx_sga/static/js/src/edx_sga.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,19 @@ function StaffGradedAssignmentXBlock(runtime, element) {
return;
}
}
$(content).find(".upload").attr("role", "progressbar");
$(content).find(".upload").attr("aria-valuemax", "100");
$(content).find(".upload").attr("aria-valuemin", "0");
data.submit();
});
},
progressall: function(e, data) {
var percent = parseInt(data.loaded / data.total * 100, 10);
$(content).find('.upload').text(
'Uploading... ' + percent + '%');
$(content).find(".upload").text(
"Uploading... " + percent + "%");
$(content).find(".upload").attr("aria-valuenow" , percent);
$(content).find(".upload").attr("aria-valuetext" ,
"Uploading... " + percent + "%");
},
fail: function(e, data) {
/**
Expand Down
21 changes: 11 additions & 10 deletions edx_sga/templates/staff_graded_assignment/edit.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
{% load i18n %}

<div id="staff-graded-assignment-edit">
<ul class="list-input settings-list">
<div id="staff-graded-assignment-edit" role="form">
<div class="list-input settings-list">
{% for field, value, validator in fields %}
<li class="field comp-setting-entry metadata_entry">
<div class="field comp-setting-entry metadata_entry">
<div class="wrapper-comp-setting">
<label class="label setting-label"
<label class="label setting-label"
for="{{ field.name }}_input">{{ field.display_name }}</label>
<input class="input setting-input" type="text"
id="{{ field.name }}_input" name="{{ field.name}}"
<input class="input setting-input" type="text" aria-describedby="{{ field.name }}_hint"
id="{{ field.name }}_input" name="{{ field.name}}"
value="{{ value }}" data-validator="{{ validator }}"/>
</div>
<span class="tip setting-help">{{ field.help }}</span>
</li>
<span id="{{ field.name }}_hint" class="tip setting-help">{{ field.help }}</span>
</div>
{% endfor %}
</ul>
</div>
</div>

<script type="application/javascript">
$("ul.action-modes").html(' <li class="view-button sga_editor_tab">{% trans "Settings" %}</li>')
$("ul.action-modes").html(' <li class="view-button sga_editor_tab" aria-label="settings">{% trans "Settings" %}</li>')
$("h2.modal-window-title").attr("tabindex","0");
</script>
105 changes: 53 additions & 52 deletions edx_sga/templates/staff_graded_assignment/show.html
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
{% load i18n %}

<div class="sga-block" data-state="{{ student_state }}" data-max-size="{{ max_file_size }}"
data-staff="{{ is_course_staff }}">
data-staff="{{ is_course_staff }}" role="article" aria-describedby="title">
<script type="text/template" id="sga-tmpl">
<% if (display_name) { %>
<b><%= display_name %></b>
<b id="title"><%= display_name %></b>
<% } %>
<% if (uploaded) { %>
<p><b>File uploaded</b>
<a href="<%= downloadUrl %>"><%= uploaded.filename %></a></p>
<br/>
<label for="file_uploaded"><b>File uploaded</b></label>
<a href="<%= downloadUrl %>" role="link" id="file_uploaded"><%= uploaded.filename %></a>
<% } else { %>
<p>No file has been uploaded.</p>
<p tabindex="0">No file has been uploaded.</p>
<% } %>
<% if (graded) { %>
<p>Your score is <%= graded.score %> / <%= max_score %><br/>
<p><span tabindex="0">Your score is <%= graded.score %> / <%= max_score %></span><br/>
<% if (graded.comment) { %>
<b>Instructor comment</b> <%= graded.comment %>
<b tabindex="0">Instructor comment</b> <%= graded.comment %>
<% } %>
<% if (annotated) { %><br/>
<b>Annotated file from instructor</b>
<a href="<%= annotatedUrl %>"><%= annotated.filename %></a>
<b id="annotated_file">Annotated file from instructor</b>
<a href="<%= annotatedUrl %>" role="link" aria-describedby="annotated_file"><%= annotated.filename %></a>
<% } %>
</p>
<% } else if (uploaded) { %>
{% trans "This assignment has not yet been graded." %}
<p tabindex="0">{% trans "This assignment has not yet been graded." %}</p>
<% } %>
<% if (upload_allowed) { %>
<p>
<% if (uploaded) { %>
{% trans "Upload a different file" %}
<span id="upload_lable">{% trans "Upload a different file" %}</span>
<% } else { %>
{% trans "Upload your assignment" %}
<span id="upload_lable">{% trans "Upload your assignment" %}</span>
<% } %>
<div class="upload">
<div class="upload" aria-describedby="upload_lable" aria-live="polite">
<input class="fileupload" type="file" name="assignment"/>
<button>Select a file</button>
<button role="button">Select a file</button>
</div>
</p>
<% } %>
<% if (error) { %>
<p class="error"><%= error %></p>
<p class="error" tabindex="0"><%= error %></p>
<% } %>
</script>

Expand All @@ -48,30 +49,30 @@

{% if is_course_staff %}
<script type="text/template" id="sga-grading-tmpl">
<table class="gridtable">
<tr>
<th>Username</th>
<th>Name</th>
<th>Filename</th>
<th>Uploaded</th>
<th>Grade</th>
<th>Instructor's comments</th>
<th>Annotated</th>
<table class="gridtable" role="grid">
<tr role="row">
<th role="columnheader">Username</th>
<th role="columnheader">Name</th>
<th role="columnheader">Filename</th>
<th role="columnheader">Uploaded</th>
<th role="columnheader">Grade</th>
<th role="columnheader">Instructor's comments</th>
<th role="columnheader">Annotated</th>
</tr>
<% for (var i = 0; i < assignments.length; i++) { %>
<% var assignment = assignments[i]; %>
<tr id="row-<%= assignment.module_id %>">
<td><%= assignment.username %></td>
<td><%= assignment.fullname %></td>
<td>
<tr id="row-<%= assignment.module_id %>" role="row">
<td role="gridcell" tabindex="0"><%= assignment.username %></td>
<td role="gridcell" tabindex="0"><%= assignment.fullname %></td>
<td role="gridcell" tabindex="0">
<% if (assignment.filename) { %>
<a href="<%= downloadUrl %>?student_id=<%= assignment.student_id %>">
<%= assignment.filename %>
</a>
<% } %>
</td>
<td><%= assignment.timestamp %></td>
<td>
<td role="gridcell" tabindex="0"><%= assignment.timestamp %></td>
<td role="gridcell" tabindex="0">
<% if (assignment.score !== null) { %>
<%= assignment.score %> /
<%= max_score %>
Expand All @@ -80,8 +81,8 @@
<% } %>
<% } %>
</td>
<td><%= assignment.comment %></td>
<td>
<td role="gridcell" tabindex="0"><%= assignment.comment %></td>
<td role="gridcell" tabindex="0">
<% if (assignment.annotated) { %>
<a href="<%= annotatedUrl %>?module_id=<%= assignment.module_id %>">
<%= assignment.annotated %>
Expand All @@ -90,7 +91,7 @@
</td>
<td>
<% if (assignment.may_grade) { %>
<a class="enter-grade-button button" href="#{{ id }}-enter-grade">
<a class="enter-grade-button button" href="#{{ id }}-enter-grade" role="button">
<% if (assignment.needs_approval) { %>
{% trans "Approve grade" %}
<% } else { %>
Expand All @@ -100,24 +101,24 @@
<% } %>
</td>
<td>
<div class="upload">
<div class="upload" aria-live="polite">
<input class="fileupload" type="file" name="annotated"/>
<button>Upload annotated file</button>
<button role="button">Upload annotated file</button>
</div>
</td>
</tr>
<% } %>
</table>
</script>

<div aria-hidden="true" class="wrap-instructor-info">
<a class="instructor-info-action" id="grade-submissions-button"
<div class="wrap-instructor-info">
<a class="instructor-info-action" id="grade-submissions-button" role="link" tabindex="0" aria-expanded="true"
href="#{{ id }}-grade">{% trans "Grade Submissions" %}</a>
<a class="instructor-info-action" id="staff-debug-info-button"
<a class="instructor-info-action" id="staff-debug-info-button" role="link" tabindex="0" aria-expanded="true"
href="#{{ id }}-debug">{% trans "Staff Debug Info" %}</a>
</div>

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

<section aria-hidden="true" class="modal staff-modal"
<section class="modal staff-modal"
style="height: 80%" id="{{ id }}-debug">
<div class="inner-wrapper" style="color: black">
<header><h2>{% trans "Staff Debug" %}</h2></header>
<header role="banner"><h2 role="heading">{% trans "Staff Debug" %}</h2></header>
<br/>
<div class="staff_info" style="display: block; white-space: normal">
is_released = {{ is_released }}<br/>
location = {{ location }}<br/>
<div class="staff_info" style="display: block; white-space: normal" aria-readonly="true">
<span tabindex="0">is_released = {{ is_released }}</span> <br/>
<span tabindex="0">location = {{ location }}</span><br/>
<br/>
<table summary="${_('Module Fields')}">
<tr><th>{% trans "Module Fields" %}</th></tr>
<table summary="${_('Module Fields')}" role="grid">
<tr role="row"><th role="columnheader" tabindex="0">{% trans "Module Fields" %}</th></tr>
{% for name, field in fields %}
<tr>
<td>{{name}}</td>
<td>
<pre style="display:inline-block; margin: 0;">{{field}}</pre>
<tr role="row">
<td role="gridcell" tabindex="0">{{name}}</td>
<td role="gridcell">
<pre style="display:inline-block; margin: 0;" tabindex="0">{{field}}</pre>
</td>
</tr>
{% endfor %}
</table><br/>
category = {{category}}
<span tabindex="0">category = {{category}}</span>
</div>
</div>
</section>

<section aria-hidden="true" class="modal grade-modal" id="{{ id }}-enter-grade">
<section class="modal grade-modal" id="{{ id }}-enter-grade">
<div class="inner-wrapper" style="color: black">
<header><h2>
{% trans "Enter Grade" %}
Expand Down

0 comments on commit cfa465b

Please sign in to comment.