Skip to content

E
edx-platform
Commit 9b8d6206 by Chris Rodriguez
Options

Accessibility tweaks and patching RTL

parent 5bf60099
Showing with 86 additions and 31 deletions
lms/static/sass/views/_shoppingcart.scss
......@@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5;
color: $dark-gray1;
}
ul.steps {
ol.steps {
@extend %ui-no-list;
border-top: $steps-border;
border-bottom: $steps-border;
......@@ -262,9 +262,15 @@ $light-border: 1px solid $gray-l5;
}
&:after {
@include right(-$baseline*2);
@include ltr {content: "\f178";}
@include rtl {content: "\f177";}
@include ltr {
right: -($baseline*2);
content: "\f178";
}
@include rtl {
left: -($baseline*2);
content: "\f177";
}
position: absolute;
top: ($baseline*1.3);
color: $light-gray;
......@@ -303,6 +309,34 @@ $light-border: 1px solid $gray-l5;
color: $light-gray2;
}
.course-registration-title,
.course-dates-title {
@extend %t-title6;
display: block;
padding: 0;
text-transform: uppercase;
color: $light-gray2;
}
.course-display-name,
.course-display-dates {
@extend %t-title4;
display: block;
color: $dark-gray2;
}
.course-title-info {
display: inline-block;
width: 60%;
}
.course-meta-info {
@include float(right);
@include text-align(right);
display: inline-block;
width: 35%;
}
h1 {
@include float(left);
@extend %t-title4;
......@@ -1036,7 +1070,7 @@ $light-border: 1px solid $gray-l5;
content: none !important;
}
ul.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated {
ol.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated {
display: none;
}
......
lms/templates/shoppingcart/cybersource_form.html
<%! from django.utils.translation import ugettext as _ %>
<form action="${action}" method="post">
% for pk, pv in params.iteritems():
<input type="hidden" name="${pk}" value="${pv}" aria-hidden="true" />
<input type="hidden" name="${pk}" value="${pv}" />
% endfor
<button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
......
lms/templates/shoppingcart/shopping_cart.html
......@@ -73,10 +73,14 @@ from django.utils.translation import ungettext
</div>
<div class="data-input">
## Translators: "Registration for:" is followed by a course name
<h3>${_('Registration for:')}
<span class="pull-right">${_('Course Dates:')}</span>
<h3 class="course-title-info" id="course-title">
<span class="course-registration-title">${_('Registration for:')}</span>
<span class="course-display-name">${ course.display_name }</span>
</h3>
<h1>${ course.display_name }</h1><span class="pull-right">${course.start_datetime_text()} - ${course.end_datetime_text()}</span>
<p class="course-meta-info" aria-describedby="course-title">
<span class="course-dates-title">${_('Course Dates:')}</span>
<span class="course-display-dates clearfix">${ course.start_datetime_text() } - ${ course.end_datetime_text() }</span>
</p>
<hr>
<div class="three-col">
<div class="col-1">
......@@ -100,19 +104,29 @@ from django.utils.translation import ungettext
% endif
</div>
<div class="col-2">
<div class="numbers-row">
<label for="students">${_('Students:')}</label>
<div class="numbers-row" aria-live="polite">
<label for="field_${item.id}">${_('Students:')}</label>
<div class="counter">
<input maxlength="3" title="${_('Input quantity and press enter.')}" max="999" type="text" name="students" value="${item.qty}" id="${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}">
<input maxlength="3" title="${_('Input quantity and press enter.')}" max="999" type="text" name="students" value="${item.qty}" id="field_${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}" aria-describedby="students-${item.id}">
</div>
<button class="inc button"><i class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></i></button><button class="dec button"><i class="icon fa fa-caret-down"></i></button>
<button class="inc button">
<i class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></i>
<span class="sr">Increase</span>
</button>
<button class="dec button">
<i class="icon fa fa-caret-down"></i>
<span class="sr">Decrease</span>
</button>
<!--<a name="updateBtn" class="updateBtn hidden" id="updateBtn-${item.id}" href="#">update</a>-->
<span class="error-text hidden" id="students-${item.id}" aria-hidden="true"></span>
<span class="error-text hidden" id="students-${item.id}"></span>
</div>
</div>
<div class="col-3">
<button href="#" class="btn-remove" data-item-id="${item.id}"><i class="icon fa fa-times-circle" aria-hidden="true"></i></button>
<button href="#" class="btn-remove" data-item-id="${item.id}">
<i class="icon fa fa-times-circle" aria-hidden="true"></i>
<span class="sr">Remove</span>
</button>
</div>
</div>
</div>
......@@ -124,10 +138,11 @@ from django.utils.translation import ungettext
<div class="code-text">
% if not discount_applied:
<div class="code-input">
<div class="code-input" aria-live="polite">
<label for="input_code" class="sr">Discount or activation code</label>
<input type="text" placeholder="${_('discount or activation code')}" id="input_code">
<button type="submit" class="blue" id="submit-code">${_('Apply')}</button>
<span class="error-text hidden" id="code" ></span>
<span class="error-text hidden" id="code"></span>
</div>
% else:
<div class="code-applied">
......@@ -149,31 +164,37 @@ from django.utils.translation import ungettext
<div class="col-2 relative">
% if order_type == 'business':
<div name="billing">
<button type="submit" name="billing-details">${_('Billing Details')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
<button type="submit" name="billing-details" aria-describedby="billing_business_helper_text">
${_('Billing Details')}
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
</button>
<p id="billing_business_helper_text">
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
</div>
<div name="payment" class="hidden">
<div id="processor_form">
<div id="processor_form" aria-describedby="payment_business_helper_text">
${form_html}
</div>
<p>
<p id="payment_business_helper_text">
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
% else:
<div name="payment">
<div name="payment" aria-describedby="payment_helper_text">
${form_html}
<p>
<p id="payment_helper_text">
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
<div name="billing" class="hidden">
<button type="submit" name="billing-details">${_('Billing Details')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
<button type="submit" name="billing-details" aria-describedby="billing_helper_text">
${_('Billing Details')}
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
</button>
<p id="billing_helper_text">
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
</div>
%endif
</div>
......
lms/templates/shoppingcart/shopping_cart_flow.html
......@@ -15,12 +15,12 @@ from django.utils.translation import ugettext as _
<header class="wrapper confirm-enrollment shopping-cart">
<h1> ${_("{platform_name} - Shopping Cart").format(platform_name=microsite.get_value('platform_name', settings.PLATFORM_NAME))}</h1>
% if shoppingcart_items:
<ul class="steps" aria-label="${_('Steps')}">
<ol class="steps">
<li <%block name="review_highlight"/>>${_('Review')}</li>
<%block name="billing_details_highlight"/>
<li <%block name="payment_highlight"/>>${_('Payment')}</li>
<li <%block name="confirmation_highlight"/>>${_('Confirmation')}</li>
</ul>
</ol>
%endif
</header>
</div>
......
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