Commit e18fa2f4 by Amir Qayyum Khan

Fixed explicit labels related issues on CCX coach dashboard and membershp team…

Fixed explicit labels related issues on CCX coach dashboard and membershp team management to fix #21
parent 5e928417
...@@ -117,7 +117,7 @@ class AuthListWidget extends MemberListWidget ...@@ -117,7 +117,7 @@ class AuthListWidget extends MemberListWidget
# create revoke button and insert it into the row # create revoke button and insert it into the row
label_trans = gettext("Revoke access") 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' class: 'revoke'
$revoke_btn.click => $revoke_btn.click =>
@modify_member_access member.email, 'revoke', (error) => @modify_member_access member.email, 'revoke', (error) =>
......
...@@ -306,7 +306,6 @@ var edx = edx || {}; ...@@ -306,7 +306,6 @@ var edx = edx || {};
row.removeClass('expanded').addClass('collapsed'); row.removeClass('expanded').addClass('collapsed');
children.hide(); children.hide();
} }
else { else {
$(this).attr('aria-expanded', 'true'); $(this).attr('aria-expanded', 'true');
$(this).find(".fa-caret-right").removeClass('fa-caret-right').addClass('fa-caret-down'); $(this).find(".fa-caret-right").removeClass('fa-caret-right').addClass('fa-caret-down');
......
...@@ -4,19 +4,20 @@ ...@@ -4,19 +4,20 @@
<form method="POST" action="ccx_invite"> <form method="POST" action="ccx_invite">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<h2> ${_("Batch Enrollment")} </h2> <h2> ${_("Batch Enrollment")} </h2>
<p> <label for="student-ids" class="sr">${_("Email Addresses/Usernames")}</label>
<label for="student-ids"> <p id="label_student_ids" class="text-helper">
${_("Enter email addresses and/or usernames separated by new lines or commas.")} ${_("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> ${_("You will not get notification for emails that bounce, so please double-check spelling.")}
<textarea rows="6" name="student-ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
</p> </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"> <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> <label style="display:inline" for="auto-enroll">${_("Auto Enroll")}</label>
<div class="hint auto-enroll-hint"> <div class="hint auto-enroll-hint">
<span class="hint-caret"></span> <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 <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)} ${_("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 /> <br /><br />
...@@ -26,11 +27,11 @@ ...@@ -26,11 +27,11 @@
</div> </div>
<div class="enroll-option"> <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> <label style="display:inline" for="email-students">${_("Notify users by email")}</label>
<div class="hint email-students-hint"> <div class="hint email-students-hint">
<span class="hint-caret"></span> <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.")} ${_("If this option is <em>checked</em>, users will receive an email notification.")}
</p> </p>
</div> </div>
...@@ -45,7 +46,7 @@ ...@@ -45,7 +46,7 @@
</form> </form>
</div> </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"> <form method="POST" action="ccx_manage_student">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<div class="auth-list-container active"> <div class="auth-list-container active">
...@@ -65,17 +66,18 @@ ...@@ -65,17 +66,18 @@
<tr> <tr>
<td>${member.user}</td> <td>${member.user}</td>
<td>${member.user.email}</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> </tr>
%endfor %endfor
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="bottom-bar"> <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"> <input name="student-action" class="add" value="Add Student" type="button">
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
...@@ -42,10 +42,10 @@ ...@@ -42,10 +42,10 @@
<form> <form>
<div class="field datepair"> <div class="field datepair">
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD ## 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" /> <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 ## 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" /> <input placeholder="Time" class="time" type="text" name="time" id="ccx_dialog_time" size="6" />
</div> </div>
<div class="field"> <div class="field">
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
aria-labelledby="ccx_schedule_save_changes_heading"> aria-labelledby="ccx_schedule_save_changes_heading">
<h2 id="ccx_schedule_save_changes_heading">${_('Save changes')}</h2> <h2 id="ccx_schedule_save_changes_heading">${_('Save changes')}</h2>
<form> <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"> <div class="field">
<br/> <br/>
<button id="save-changes" aria-describedby="message_save">${_("Save changes")}</button> <button id="save-changes" aria-describedby="message_save">${_("Save changes")}</button>
...@@ -69,26 +69,26 @@ ...@@ -69,26 +69,26 @@
</div> </div>
<div class="ccx-sidebar-panel" id="ajax-error" tabindex="-1" role="region" aria-labelledby="ccx_schedule_error_message"> <div class="ccx-sidebar-panel" id="ajax-error" tabindex="-1" role="region" aria-labelledby="ccx_schedule_error_message">
<h2>${_('Error')}</h2> <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>
<div class="ccx-sidebar-panel" aria-labelledby="ccx_schedule_unit" <div class="ccx-sidebar-panel" aria-labelledby="ccx_schedule_unit"
id="ccx_schedule_unit_panel" role="region"> id="ccx_schedule_unit_panel" role="region">
<h2 id="ccx_schedule_unit">${_('Schedule a Unit')}</h2> <h2 id="ccx_schedule_unit">${_('Schedule a Unit')}</h2>
<form role="form" id="add-unit" name="add-unit" class="ccx-form"> <form role="form" id="add-unit" name="add-unit" class="ccx-form">
<div class="field"> <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> <select name="chapter" id="ccx_chapter" ></select>
</div> </div>
<div class="field"> <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> <select name="sequential" id="ccx_sequential"></select>
</div> </div>
<div class="field"> <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> <select name="vertical" id="ccx_vertical"></select>
</div> </div>
<div class="field datepair"> <div class="field datepair">
<label for="ccx_start_date"> <label for="ccx_start_date" class="form-label">
<b>${_('Start Date')}</b> <b>${_('Start Date')}</b>
<span class="sr"> <span class="sr">
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
...@@ -97,11 +97,11 @@ ...@@ -97,11 +97,11 @@
</label> </label>
<input placeholder="yyyy-mm-dd" type="text" class="date" name="start_date" id="ccx_start_date" /> <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 ## 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"/> <input placeholder="time" type="text" class="time" name="start_time" id="ccx_start_time"/>
</div> </div>
<div class="field datepair"> <div class="field datepair">
<label for="ccx_due_date"> <label for="ccx_due_date" class="form-label">
<b>${_('Due Date')}</b> ${_('(Optional)')} <b>${_('Due Date')}</b> ${_('(Optional)')}
<span class="sr"> <span class="sr">
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
</label> </label>
<input placeholder="yyyy-mm-dd" type="text" class="date" name="due_date" id="ccx_due_date"/> <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 ## 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"/> <input placeholder="time" type="text" class="time" name="due_time" id="ccx_due_time"/>
</div> </div>
<div class="field"> <div class="field">
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<th><%- gettext('Start Date') %></th> <th><%- gettext('Start Date') %></th>
<th><%- gettext('Due Date') %></th> <th><%- gettext('Due Date') %></th>
<td><button id="remove-all" class="ccx-button-link"> <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> </button></td>
</tr> </tr>
</thead> </thead>
......
...@@ -25,7 +25,8 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_ ...@@ -25,7 +25,8 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
</table> </table>
</div> </div>
<div class="bottom-bar"> <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}}"> <input type="button" name="add" class="add" value="{{add_btn_label}}">
</div> </div>
</div> </div>
...@@ -154,7 +155,7 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_ ...@@ -154,7 +155,7 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
<hr class="divider" /> <hr class="divider" />
%endif %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. ## Translators: an "Administration List" is a list, such as Course Staff, that users can be added to.
<h2> ${_("Course Team Management")} </h2> <h2> ${_("Course Team Management")} </h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment