Skip to content

E
edx-platform
Commit b621870f by Chris
Options

Merge pull request #8218 from edx/clrux/UX-2252-accessibility-fixes-payment-page 

Accessibility tweaks and patching RTL
parents ceb75c65 926f2c03
Showing with 112 additions and 49 deletions
lms/static/sass/views/_shoppingcart.scss
...@@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5; ...@@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5;
color: $dark-gray1; color: $dark-gray1;
} }
ul.steps { .steps {
@extend %ui-no-list; @extend %ui-no-list;
border-top: $steps-border; border-top: $steps-border;
border-bottom: $steps-border; border-bottom: $steps-border;
...@@ -262,9 +262,15 @@ $light-border: 1px solid $gray-l5; ...@@ -262,9 +262,15 @@ $light-border: 1px solid $gray-l5;
} }
&:after { &:after {
@include right(-$baseline*2); @include ltr {
@include ltr {content: "\f178";} right: -($baseline*2);
@include rtl {content: "\f177";} content: "\f178";
}
@include rtl {
left: -($baseline*2);
content: "\f177";
}
position: absolute; position: absolute;
top: ($baseline*1.3); top: ($baseline*1.3);
color: $light-gray; color: $light-gray;
...@@ -298,6 +304,38 @@ $light-border: 1px solid $gray-l5; ...@@ -298,6 +304,38 @@ $light-border: 1px solid $gray-l5;
color: $light-gray2; color: $light-gray2;
} }
.course-title-info {
display: inline-block;
width: 60%;
}
.course-meta-info {
@include float(right);
@include text-align(right);
display: inline-block;
width: 35%;
}
.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-display-dates {
@include clearfix();
}
h1 { h1 {
@include float(left); @include float(left);
@extend %t-title4; @extend %t-title4;
...@@ -866,6 +904,7 @@ $light-border: 1px solid $gray-l5; ...@@ -866,6 +904,7 @@ $light-border: 1px solid $gray-l5;
span { span {
@include padding-left($baseline*3); @include padding-left($baseline*3);
text-transform: capitalize; text-transform: capitalize;
letter-spacing: 0;
.blue-link { .blue-link {
@extend %t-copy-sub1; @extend %t-copy-sub1;
...@@ -887,7 +926,7 @@ $light-border: 1px solid $gray-l5; ...@@ -887,7 +926,7 @@ $light-border: 1px solid $gray-l5;
color: $dark-gray1; color: $dark-gray1;
h2 { h2 {
font-family: $sans-serif; @extend %t-title5;
} }
} }
...@@ -999,7 +1038,7 @@ $light-border: 1px solid $gray-l5; ...@@ -999,7 +1038,7 @@ $light-border: 1px solid $gray-l5;
h2 { h2 {
@include text-align(center); @include text-align(center);
@extend %t-title4; @extend %t-title5;
@extend %t-strong; @extend %t-strong;
margin-top: $baseline; margin-top: $baseline;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
...@@ -1040,7 +1079,7 @@ $light-border: 1px solid $gray-l5; ...@@ -1040,7 +1079,7 @@ $light-border: 1px solid $gray-l5;
content: none !important; content: none !important;
} }
ul.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated { .steps, .blue.pull-right, .bordered-bar .pull-right, .left.nav-global.authenticated {
display: none; display: none;
} }
......
lms/templates/shoppingcart/cybersource_form.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<form action="${action}" method="post"> <form action="${action}" method="post">
% for pk, pv in params.iteritems(): % for pk, pv in params.iteritems():
<input type="hidden" name="${pk}" value="${pv}" aria-hidden="true" /> <input type="hidden" name="${pk}" value="${pv}" />
% endfor % endfor
<button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button> <button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
......
lms/templates/shoppingcart/receipt.html
...@@ -282,7 +282,7 @@ from microsite_configuration import microsite ...@@ -282,7 +282,7 @@ from microsite_configuration import microsite
</div> </div>
</div> </div>
% endif % endif
<hr class="border"/>
% for item, course in shoppingcart_items: % for item, course in shoppingcart_items:
% if loop.index > 0 : % if loop.index > 0 :
<hr> <hr>
...@@ -294,8 +294,13 @@ from microsite_configuration import microsite ...@@ -294,8 +294,13 @@ from microsite_configuration import microsite
alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/> alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/>
</div> </div>
<div class="data-input"> <div class="data-input">
<h3>${_("Registration for")}:
<span class="pull-right"> <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>
<p class="course-meta-info" aria-describedby="course-title">
<span class="course-dates-title">
<% <%
course_start_time = course.start_datetime_text() course_start_time = course.start_datetime_text()
course_end_time = course.end_datetime_text() course_end_time = course.end_datetime_text()
...@@ -304,19 +309,17 @@ from microsite_configuration import microsite ...@@ -304,19 +309,17 @@ from microsite_configuration import microsite
${_("Course Dates")}: ${_("Course Dates")}:
%endif %endif
</span> </span>
</h3> <span class="course-display-dates">
% if course_start_time:
<h1>${course.display_name}</h1> ${course_start_time}
<span class="pull-right"> %endif
% if course_start_time: -
${course_start_time} % if course_end_time:
%endif ${course_end_time}
- %endif
% if course_end_time: </span>
${course_end_time} </p>
%endif <hr>
</span>
<hr/>
<div class="three-col"> <div class="three-col">
% if item.status == "purchased": % if item.status == "purchased":
<div class="col-1"> <div class="col-1">
......
lms/templates/shoppingcart/shopping_cart.html
...@@ -71,10 +71,14 @@ from django.utils.translation import ungettext ...@@ -71,10 +71,14 @@ from django.utils.translation import ungettext
</div> </div>
<div class="data-input"> <div class="data-input">
## Translators: "Registration for:" is followed by a course name ## Translators: "Registration for:" is followed by a course name
<h3>${_('Registration for:')} <h3 class="course-title-info" id="course-title">
<span class="pull-right">${_('Course Dates:')}</span> <span class="course-registration-title">${_('Registration for:')}</span>
<span class="course-display-name">${ course.display_name }</span>
</h3> </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">${ course.start_datetime_text() } - ${ course.end_datetime_text() }</span>
</p>
<hr> <hr>
<div class="three-col"> <div class="three-col">
<div class="col-1"> <div class="col-1">
...@@ -98,19 +102,29 @@ from django.utils.translation import ungettext ...@@ -98,19 +102,29 @@ from django.utils.translation import ungettext
% endif % endif
</div> </div>
<div class="col-2"> <div class="col-2">
<div class="numbers-row"> <div class="numbers-row" aria-live="polite">
<label for="students">${_('Students:')}</label> <label for="field_${item.id}">${_('Students:')}</label>
<div class="counter"> <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> </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>--> <!--<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> </div>
<div class="col-3"> <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> </div>
</div> </div>
...@@ -122,10 +136,11 @@ from django.utils.translation import ungettext ...@@ -122,10 +136,11 @@ from django.utils.translation import ungettext
<div class="code-text"> <div class="code-text">
% if not discount_applied: % 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"> <input type="text" placeholder="${_('discount or activation code')}" id="input_code">
<button type="submit" class="blue" id="submit-code">${_('Apply')}</button> <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> </div>
% else: % else:
<div class="code-applied"> <div class="code-applied">
...@@ -147,31 +162,37 @@ from django.utils.translation import ungettext ...@@ -147,31 +162,37 @@ from django.utils.translation import ungettext
<div class="col-2 relative"> <div class="col-2 relative">
% if order_type == 'business': % if order_type == 'business':
<div name="billing"> <div name="billing">
<button type="submit" name="billing-details">${_('Billing Details')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button> <button type="submit" name="billing-details" aria-describedby="billing_business_helper_text">
<p> ${_('Billing Details')}
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')} <i class="icon fa fa-caret-right" aria-hidden="true"></i>
</p> </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>
<div name="payment" class="hidden"> <div name="payment" class="hidden">
<div id="processor_form"> <div id="processor_form" aria-describedby="payment_business_helper_text">
${form_html} ${form_html}
</div> </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))} ${_('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> </p>
</div> </div>
% else: % else:
<div name="payment"> <div name="payment" aria-describedby="payment_helper_text">
${form_html} ${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))} ${_('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> </p>
</div> </div>
<div name="billing" class="hidden"> <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> <button type="submit" name="billing-details" aria-describedby="billing_helper_text">
<p> ${_('Billing Details')}
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')} <i class="icon fa fa-caret-right" aria-hidden="true"></i>
</p> </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> </div>
%endif %endif
</div> </div>
......
lms/templates/shoppingcart/shopping_cart_flow.html
...@@ -15,12 +15,12 @@ from microsite_configuration import microsite ...@@ -15,12 +15,12 @@ from microsite_configuration import microsite
<header class="wrapper confirm-enrollment shopping-cart"> <header class="wrapper confirm-enrollment shopping-cart">
<h1> ${_("{platform_name} - Shopping Cart").format(platform_name=microsite.get_value('platform_name', settings.PLATFORM_NAME))}</h1> <h1> ${_("{platform_name} - Shopping Cart").format(platform_name=microsite.get_value('platform_name', settings.PLATFORM_NAME))}</h1>
% if shoppingcart_items: % if shoppingcart_items:
<ul class="steps" aria-label="${_('Steps')}"> <ol class="steps">
<li <%block name="review_highlight"/>>${_('Review')}</li> <li <%block name="review_highlight"/>>${_('Review')}</li>
<%block name="billing_details_highlight"/> <%block name="billing_details_highlight"/>
<li <%block name="payment_highlight"/>>${_('Payment')}</li> <li <%block name="payment_highlight"/>>${_('Payment')}</li>
<li <%block name="confirmation_highlight"/>>${_('Confirmation')}</li> <li <%block name="confirmation_highlight"/>>${_('Confirmation')}</li>
</ul> </ol>
%endif %endif
</header> </header>
</div> </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