From cfa465bd5d4be1fa04cc27cc387f88c53ac14bbb Mon Sep 17 00:00:00 2001
From: Amir Qayyum khan <amir.qayyum@arbisoft.com>
Date: Fri, 17 Apr 2015 15:29:09 +0500
Subject: [PATCH] fix accessibility issues in code

---
 edx_sga/static/js/src/edx_sga.js              |  10 +-
 .../staff_graded_assignment/edit.html         |  21 ++--
 .../staff_graded_assignment/show.html         | 105 +++++++++---------
 3 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/edx_sga/static/js/src/edx_sga.js b/edx_sga/static/js/src/edx_sga.js
index e41890cb..eb2486f1 100644
--- a/edx_sga/static/js/src/edx_sga.js
+++ b/edx_sga/static/js/src/edx_sga.js
@@ -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) {
                     /**
diff --git a/edx_sga/templates/staff_graded_assignment/edit.html b/edx_sga/templates/staff_graded_assignment/edit.html
index 4ef3d34a..876b6908 100644
--- a/edx_sga/templates/staff_graded_assignment/edit.html
+++ b/edx_sga/templates/staff_graded_assignment/edit.html
@@ -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>
diff --git a/edx_sga/templates/staff_graded_assignment/show.html b/edx_sga/templates/staff_graded_assignment/show.html
index 7eac9d9e..9d50d7c2 100644
--- a/edx_sga/templates/staff_graded_assignment/show.html
+++ b/edx_sga/templates/staff_graded_assignment/show.html
@@ -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>
 
@@ -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 %>
@@ -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 %>
@@ -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 { %>
@@ -100,9 +101,9 @@
            <% } %>
           </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>
@@ -110,14 +111,14 @@
     </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/>
@@ -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" %}