Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y issues on upgrade footer.

Browse Source 
LEARNER-3055
This commit is contained in:
Harry Rein
2018-01-22 09:38:54 -05:00
parent c368c9066d
commit 9dab9d2c20
3 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
lms/static/sass/features/_course-sock.scss
View File

@@ -48,6 +48,15 @@
color: $black-t3;
position: relative;
h2 {
font-size: 1.5rem;
font-weight: $font-weight-bold;
}
h3 {
font-size: 1.25rem;
}
@media (max-width: 960px) {
.mini-cert {
display: none;
@@ -63,16 +72,6 @@
width: ($baseline * 13);
}
h2 {
font-size: 1.5rem;
font-weight: 700;
}
h4 {
font-size: 1.25rem;
font-weight: 600;
}
.learner-story-container {
display: flex;
max-width: 630px;

6
openedx/features/course_experience/static/course_experience/js/CourseSock.js
View File

@@ -52,9 +52,13 @@ export class CourseSock { // eslint-disable-line import/prefer-default-export
// Open the sock when user clicks to Learn More
$toggleActionButton.on('click', () => {
const toggleSpeed = 400;
$toggleActionButton.toggleClass('active').toggleClass('aria-expanded');
$toggleActionButton.toggleClass('active');
$verificationSock.slideToggle(toggleSpeed, fixUpgradeButton);
// Toggle aria-expanded attribute
const newAriaExpandedState = $toggleActionButton.attr('aria-expanded') === 'false';
$toggleActionButton.attr('aria-expanded', newAriaExpandedState);
// Log open and close events
const isOpening = $toggleActionButton.hasClass('active');
const logMessage = isOpening ? 'edx.bi.course.sock.toggle_opened'

10
openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
View File

@@ -16,20 +16,20 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
style="display: none"
%endif
>
<button type="button" class="btn btn-primary focusable action-toggle-verification-sock">
<button type="button" aria-expanded="false" class="btn btn-primary focusable action-toggle-verification-sock">
${_('Learn About Verified Certificates')}
</button>
<div class="verification-main-panel">
<div class="verification-desc-panel content-main">
<h2>${_('{platform_name} Verified Certificate').format(platform_name=settings.PLATFORM_NAME)}</h2>
<h4>${_('Why upgrade?')}</h4>
<h3>${_('Why upgrade?')}</h3>
<ul>
<li>${_('Official proof of completion')}</li>
<li>${_('Easily shareable certificate')}</li>
<li>${_('Proven motivator to complete the course')}</li>
<li>${_('Certificate purchases help {platform_name} continue to offer free courses').format(platform_name=settings.PLATFORM_NAME)}</li>
</ul>
<h4>${_('How it works')}</h4>
<h3>${_('How it works')}</h3>
<ul>
<li>${_('Pay the Verified Certificate upgrade fee')}</li>
<li>${_('Verify your identity with a webcam and government-issued ID')}</li>
@@ -37,7 +37,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
<li>${_('Share your certificate with friends, employers, and others')}</li>
</ul>
% if settings.PLATFORM_NAME == 'edX':
<h4>${_('edX Learner Stories')}</h4>
<h3>${_('edX Learner Stories')}</h3>
<div class="learner-story-container">
<img class="student-image" alt="Student Image" src="${static.url('course_experience/images/learner-quote.png')}" />
<div class="story-quote">
@@ -57,7 +57,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
</div>
</div>
% endif
<img class="mini-cert" src="${static.url('course_experience/images/verified-cert.png')}"/>
<img class="mini-cert" alt="Example Certificate Image" src="${static.url('course_experience/images/verified-cert.png')}"/>
<a href="${upgrade_url}">
<button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
${Text(_('Upgrade ({course_price})')).format(course_price=HTML(course_price))}