From e18fa2f489d4b6a4a8d1fc188c0d36c6f333afb9 Mon Sep 17 00:00:00 2001
From: Amir Qayyum Khan <amir.qayyum.khan@gmail.com>
Date: Thu, 23 Jul 2015 13:00:21 +0500
Subject: [PATCH] Fixed explicit labels related issues on CCX coach dashboard
 and membershp team management to fix #21

---
 .../instructor_dashboard/membership.coffee    |  2 +-
 lms/static/js/ccx/schedule.js                 |  1 -
 lms/templates/ccx/enrollment.html             | 26 ++++++++++---------
 lms/templates/ccx/schedule.html               | 22 ++++++++--------
 lms/templates/ccx/schedule.underscore         |  2 +-
 .../instructor_dashboard_2/membership.html    |  5 ++--
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/lms/static/coffee/src/instructor_dashboard/membership.coffee b/lms/static/coffee/src/instructor_dashboard/membership.coffee
index 4dc86bc849..15cd69d146 100644
--- a/lms/static/coffee/src/instructor_dashboard/membership.coffee
+++ b/lms/static/coffee/src/instructor_dashboard/membership.coffee
@@ -117,7 +117,7 @@ class AuthListWidget extends MemberListWidget
 
         # create revoke button and insert it into the row
         label_trans = gettext("Revoke access")
-        $revoke_btn = $ _.template('<div class="revoke"><i class="icon fa fa-times-circle"></i> <%= label %></div>', {label: label_trans}),
+        $revoke_btn = $ _.template('<div class="revoke"><i class="icon fa fa-times-circle" aria-hidden="true"></i> <%= label %></div>', {label: label_trans}),
           class: 'revoke'
         $revoke_btn.click =>
             @modify_member_access member.email, 'revoke', (error) =>
diff --git a/lms/static/js/ccx/schedule.js b/lms/static/js/ccx/schedule.js
index fa50bf67c4..20ffdc1c38 100644
--- a/lms/static/js/ccx/schedule.js
+++ b/lms/static/js/ccx/schedule.js
@@ -306,7 +306,6 @@ var edx = edx || {};
 	      row.removeClass('expanded').addClass('collapsed');
 	      children.hide();
 	    }
-
 	    else {
 				$(this).attr('aria-expanded', 'true');
 	      $(this).find(".fa-caret-right").removeClass('fa-caret-right').addClass('fa-caret-down');
diff --git a/lms/templates/ccx/enrollment.html b/lms/templates/ccx/enrollment.html
index 15ea3d86a3..2d054da3e4 100644
--- a/lms/templates/ccx/enrollment.html
+++ b/lms/templates/ccx/enrollment.html
@@ -4,19 +4,20 @@
   <form method="POST" action="ccx_invite">
   <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
   <h2> ${_("Batch Enrollment")} </h2>
-  <p>
-    <label for="student-ids">
+  <label for="student-ids" class="sr">${_("Email Addresses/Usernames")}</label>
+  <p id="label_student_ids" class="text-helper">
       ${_("Enter email addresses and/or usernames separated by new lines or commas.")}
-      ${_("You will not get notification for emails that bounce, so please double-check spelling.")} </label>
-    <textarea rows="6" name="student-ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
+      ${_("You will not get notification for emails that bounce, so please double-check spelling.")}
   </p>
+  <textarea rows="6" name="student-ids" id="student-ids" aria-describedby="label_student_ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
+
 
   <div class="enroll-option">
-    <input type="checkbox" name="auto-enroll" value="Auto-Enroll" checked="yes">
+    <input type="checkbox" name="auto-enroll" id="auto-enroll" value="Auto-Enroll" checked="yes" aria-describedby="auto-enroll-helper">
     <label style="display:inline" for="auto-enroll">${_("Auto Enroll")}</label>
     <div class="hint auto-enroll-hint">
       <span class="hint-caret"></span>
-      <p>
+      <p class="text-helper" id="auto-enroll-helper">
 	${_("If this option is <em>checked</em>, users who have not yet registered for {platform_name} will be automatically enrolled.").format(platform_name=settings.PLATFORM_NAME)}
 	${_("If this option is left <em>unchecked</em>, users who have not yet registered for {platform_name} will not be enrolled, but will be allowed to enroll once they make an account.").format(platform_name=settings.PLATFORM_NAME)}
 	<br /><br />
@@ -26,11 +27,11 @@
   </div>
 
   <div class="enroll-option">
-    <input type="checkbox" name="email-students" value="Notify-students-by-email" checked="yes">
+    <input type="checkbox" name="email-students" id="email-students" value="Notify-students-by-email" checked="yes" aria-describedby="email-students-helper">
     <label style="display:inline" for="email-students">${_("Notify users by email")}</label>
     <div class="hint email-students-hint">
       <span class="hint-caret"></span>
-      <p>
+      <p class="text-helper" id="email-students-helper">
 	${_("If this option is <em>checked</em>, users will receive an email notification.")}
       </p>
     </div>
@@ -45,7 +46,7 @@
   </form>
 </div>
 
-<div class="member-lists-management" style="float:left;width:50%">
+<div class="member-lists-management" style="float:left;width:50%" aria-live="polite">
   <form method="POST" action="ccx_manage_student">
   <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
   <div class="auth-list-container active">
@@ -65,17 +66,18 @@
             <tr>
               <td>${member.user}</td>
               <td>${member.user.email}</td>
-              <td><div class="revoke"><i class="fa fa-times-circle"></i> Revoke access</div></td>
+              <td><div class="revoke"><i class="fa fa-times-circle" aria-hidden="true"></i> Revoke access</div></td>
             </tr>
             %endfor
           </tbody>
         </table>
       </div>
       <div class="bottom-bar">
-        <input name="student-id" class="add-field" placeholder="Enter username or email" type="text">
+        <label for="student-id" class="sr">${_("Enter username or email")}</label>
+        <input name="student-id" id="student-id" class="add-field" placeholder="${_("Enter username or email")}" type="text">
         <input name="student-action" class="add" value="Add Student" type="button">
       </div>
     </div>
   </div>
   </form>
-</div> 
+</div>
diff --git a/lms/templates/ccx/schedule.html b/lms/templates/ccx/schedule.html
index a8cfe9b5d4..0c52ddbbeb 100644
--- a/lms/templates/ccx/schedule.html
+++ b/lms/templates/ccx/schedule.html
@@ -42,10 +42,10 @@
     <form>
       <div class="field datepair">
         ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
-        <label class="sr" for="ccx_dialog_date">${_('Date format four digit year dash two digit month dash two digit day')}</label>
+        <label class="sr form-label" for="ccx_dialog_date">${_('Date format four digit year dash two digit month dash two digit day')}</label>
         <input placeholder="Date" class="date" type="text" name="date" id="ccx_dialog_date" size="11" />
         ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
-        <label class="sr" for="ccx_dialog_time">${_('Time format two digit hours colon two digit minutes')}</label>
+        <label class="sr form-label" for="ccx_dialog_time">${_('Time format two digit hours colon two digit minutes')}</label>
         <input placeholder="Time" class="time" type="text" name="time" id="ccx_dialog_time" size="6" />
       </div>
       <div class="field">
@@ -60,7 +60,7 @@
        aria-labelledby="ccx_schedule_save_changes_heading">
     <h2 id="ccx_schedule_save_changes_heading">${_('Save changes')}</h2>
     <form>
-      <p id="message_save">${_("You have unsaved changes.")}</p>
+      <p id="message_save" class="text-helper">${_("You have unsaved changes.")}</p>
       <div class="field">
         <br/>
         <button id="save-changes" aria-describedby="message_save">${_("Save changes")}</button>
@@ -69,26 +69,26 @@
   </div>
   <div class="ccx-sidebar-panel" id="ajax-error" tabindex="-1" role="region" aria-labelledby="ccx_schedule_error_message">
     <h2>${_('Error')}</h2>
-    <p id="ccx_schedule_error_message">${_("There was an error saving changes.")}</p>
+    <p id="ccx_schedule_error_message" class="text-helper">${_("There was an error saving changes.")}</p>
   </div>
   <div class="ccx-sidebar-panel" aria-labelledby="ccx_schedule_unit"
        id="ccx_schedule_unit_panel" role="region">
     <h2 id="ccx_schedule_unit">${_('Schedule a Unit')}</h2>
     <form role="form" id="add-unit" name="add-unit" class="ccx-form">
       <div class="field">
-        <label for="ccx_chapter"><b>${_('Section')}</b></label>
+        <label for="ccx_chapter" class="form-label"><b>${_('Section')}</b></label>
         <select name="chapter" id="ccx_chapter" ></select>
       </div>
       <div class="field">
-        <label for="ccx_sequential"><b>${_('Subsection')}</b></label>
+        <label for="ccx_sequential" class="form-label"><b>${_('Subsection')}</b></label>
         <select name="sequential" id="ccx_sequential"></select>
       </div>
       <div class="field">
-        <label for="ccx_vertical"><b>${_('Unit')}</b></label>
+        <label for="ccx_vertical" class="form-label"><b>${_('Unit')}</b></label>
         <select name="vertical" id="ccx_vertical"></select>
       </div>
       <div class="field datepair">
-        <label for="ccx_start_date">
+        <label for="ccx_start_date" class="form-label">
             <b>${_('Start Date')}</b>
             <span class="sr">
               ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
@@ -97,11 +97,11 @@
         </label>
         <input placeholder="yyyy-mm-dd" type="text" class="date" name="start_date" id="ccx_start_date" />
         ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
-        <label for="ccx_start_time" class="sr">${_('Start time format two digit hours colon two digit minutes')}</label>
+        <label for="ccx_start_time" class="sr form-label">${_('Start time format two digit hours colon two digit minutes')}</label>
         <input placeholder="time" type="text" class="time" name="start_time" id="ccx_start_time"/>
       </div>
       <div class="field datepair">
-        <label for="ccx_due_date">
+        <label for="ccx_due_date" class="form-label">
             <b>${_('Due Date')}</b> ${_('(Optional)')}
             <span class="sr">
                 ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
@@ -110,7 +110,7 @@
         </label>
         <input placeholder="yyyy-mm-dd" type="text" class="date" name="due_date" id="ccx_due_date"/>
         ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
-        <label for="ccx_due_time" class="sr">${_('Due Time format two digit hours colon two digit minutes')}</label>
+        <label for="ccx_due_time" class="sr form-label">${_('Due Time format two digit hours colon two digit minutes')}</label>
         <input placeholder="time" type="text" class="time" name="due_time" id="ccx_due_time"/>
       </div>
       <div class="field">
diff --git a/lms/templates/ccx/schedule.underscore b/lms/templates/ccx/schedule.underscore
index 4bfa3ab622..11b21c372d 100644
--- a/lms/templates/ccx/schedule.underscore
+++ b/lms/templates/ccx/schedule.underscore
@@ -14,7 +14,7 @@
         <th><%- gettext('Start Date') %></th>
         <th><%- gettext('Due Date') %></th>
         <td><button id="remove-all" class="ccx-button-link">
-          <i class="fa fa-remove"></i> <%- gettext('remove all') %>
+          <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove all') %>
         </button></td>
       </tr>
     </thead>
diff --git a/lms/templates/instructor/instructor_dashboard_2/membership.html b/lms/templates/instructor/instructor_dashboard_2/membership.html
index 360e9536b3..03fb666144 100644
--- a/lms/templates/instructor/instructor_dashboard_2/membership.html
+++ b/lms/templates/instructor/instructor_dashboard_2/membership.html
@@ -25,7 +25,8 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
       </table>
     </div>
     <div class="bottom-bar">
-      <input type="text" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
+      <label for="add-field" class="sr">{{add_placeholder}}</label>
+      <input type="text" id="add-field" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
       <input type="button" name="add" class="add" value="{{add_btn_label}}">
     </div>
   </div>
@@ -154,7 +155,7 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
 <hr class="divider" />
 %endif
 
-<div class="member-lists-management membership-section">
+<div class="member-lists-management membership-section" aria-live="polite">
   ## Translators: an "Administration List" is a list, such as Course Staff, that users can be added to.
   <h2> ${_("Course Team Management")} </h2>