Skip to content

E
edx-platform
Commit 19604a4a by Mark Sadecki
Options

Merge pull request #9038 from mitocw/fix/aq/extended_labels_issues_ccx 

Fixed explicit label issues related to CCX accessibility
parents 8b704cc2 e18fa2f4
Showing with 30 additions and 28 deletions
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) =>
......
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');
......
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>
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">
......
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>
......
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>
......
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