Skip to content

E
edx-platform
Commit 072dbcd5 by Will Daly
Options

Merge pull request #7412 from edx/will/ecom-1233 

A11y fixes for EdX header.
parents 30058b91 cb21a081
Showing with 125 additions and 94 deletions
common/static/js/utils/rwd_header_footer.js
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
init: function() { init: function() {
_fn.$header = $( _fn.header ); _fn.$header = $( _fn.header );
_fn.$footer = $( _fn.footer ); _fn.$footer = $( _fn.footer );
_fn.$nav = _fn.$header.find('nav'); _fn.$navContainer = _fn.$header.find('.nav-container');
_fn.$globalNav = _fn.$nav.find('.nav-global'); _fn.$globalNav = _fn.$header.find('.nav-global');
_fn.add.elements(); _fn.add.elements();
_fn.add.classes(); _fn.add.classes();
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
}, },
burger: function() { burger: function() {
_fn.$nav.prepend([ _fn.$navContainer.prepend([
'<a href="#" class="mobile-menu-button" aria-label="menu">', '<a href="#" class="mobile-menu-button" aria-label="menu">',
'<i class="icon fa fa-bars" aria-hidden="true"></i>', '<i class="icon fa fa-bars" aria-hidden="true"></i>',
'</a>' '</a>'
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
}, },
registerLink: function() { registerLink: function() {
var $register = _fn.$nav.find('.cta-register'), var $register = _fn.$header.find('.cta-register'),
$li = {}, $li = {},
$a = {}, $a = {},
count = 0; count = 0;
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
click: function() { click: function() {
// Toggle menu // Toggle menu
_fn.$nav.on( 'click', '.mobile-menu-button', _fn.toggleMenu ); _fn.$header.on( 'click', '.mobile-menu-button', _fn.toggleMenu );
} }
}, },
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
width: 100%; width: 100%;
.course-material{ .course-material{
@extend %inner-wrapper; @extend %inner-wrapper;
} }
ol.course-tabs { ol.course-tabs {
...@@ -76,6 +76,14 @@ header.global.slim { ...@@ -76,6 +76,14 @@ header.global.slim {
border-bottom: 1px solid $outer-border-color; border-bottom: 1px solid $outer-border-color;
background: $header-bg; background: $header-bg;
.wrapper-header {
padding-top: ($baseline/4);
}
.nav-account-management {
padding: 0;
}
.guest .secondary { .guest .secondary {
margin-right: 0; margin-right: 0;
} }
...@@ -147,6 +155,7 @@ header.global.slim { ...@@ -147,6 +155,7 @@ header.global.slim {
} }
} }
.nav-main,
.nav-global { .nav-global {
display: none; display: none;
} }
......
lms/static/sass/shared/_header.scss
...@@ -10,13 +10,13 @@ header.global { ...@@ -10,13 +10,13 @@ header.global {
position: relative; position: relative;
width: 100%; width: 100%;
nav { .wrapper-header {
@include clearfix(); @include clearfix();
height: 40px; height: 40px;
margin: 0 auto; margin: 0 auto;
padding: 18px ($baseline/2) 0; padding: 18px ($baseline/2) 0;
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; width: 100%;
} }
h1.logo { h1.logo {
...@@ -29,6 +29,15 @@ header.global { ...@@ -29,6 +29,15 @@ header.global {
} }
} }
nav {
@include clearfix();
height: 40px;
margin: 0 auto;
padding: 18px ($baseline/2) 0;
max-width: grid-width(12);
min-width: 760px;
}
.left { .left {
@include float(left); @include float(left);
} }
...@@ -119,6 +128,7 @@ header.global { ...@@ -119,6 +128,7 @@ header.global {
> a { > a {
margin: 0; margin: 0;
@include border-right-radius(0px); @include border-right-radius(0px);
background-image: none;
} }
&:last-child { &:last-child {
...@@ -148,7 +158,7 @@ header.global { ...@@ -148,7 +158,7 @@ header.global {
.icon { .icon {
display: inline-block; display: inline-block;
@include float(left); @include float(left);
margin: 3px 0 -3px 0; @include margin(2px, 6px, -3px, 3px);
font-size: 1.2em; font-size: 1.2em;
color: $m-gray; color: $m-gray;
} }
...@@ -191,6 +201,7 @@ header.global { ...@@ -191,6 +201,7 @@ header.global {
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
display: none; display: none;
margin-top: 0;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
@include right(0px); @include right(0px);
...@@ -216,7 +227,7 @@ header.global { ...@@ -216,7 +227,7 @@ header.global {
height: 0px; height: 0px;
position: absolute; position: absolute;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
@include right(12px); @include right(7px);
top: -6px; top: -6px;
width: 0px; width: 0px;
} }
...@@ -349,13 +360,17 @@ header.global-new { ...@@ -349,13 +360,17 @@ header.global-new {
box-shadow: 0 1px 5px 0 $shadow-l1; box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg; background: $header-bg;
nav { .wrapper-header {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
width: grid-width(12);
height: 74px; height: 74px;
margin: 0 auto; margin: 0 auto;
padding: 17px 0; padding: 17px 0;
max-width: grid-width(12);
&:not(.rwd) {
min-width: grid-width(9);
}
} }
h1.logo { h1.logo {
...@@ -372,6 +387,10 @@ header.global-new { ...@@ -372,6 +387,10 @@ header.global-new {
@include float(left); @include float(left);
} }
.nav-account-management {
margin: 0 auto;
}
.guest { .guest {
@include float(right); @include float(right);
} }
...@@ -455,6 +474,7 @@ header.global-new { ...@@ -455,6 +474,7 @@ header.global-new {
> a { > a {
margin: 0; margin: 0;
@include border-right-radius(0); @include border-right-radius(0);
background-image: none;
} }
&:last-child { &:last-child {
...@@ -483,7 +503,7 @@ header.global-new { ...@@ -483,7 +503,7 @@ header.global-new {
.icon { .icon {
display: inline-block; display: inline-block;
@include float(left); @include float(left);
margin: 3px 0 -3px 0; @include margin(2px, 6px, -3px, 3px);
font-size: 1.2em; font-size: 1.2em;
color: $m-gray; color: $m-gray;
} }
...@@ -526,6 +546,7 @@ header.global-new { ...@@ -526,6 +546,7 @@ header.global-new {
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
display: none; display: none;
margin-top: 0;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
@include right(0); @include right(0);
...@@ -551,7 +572,7 @@ header.global-new { ...@@ -551,7 +572,7 @@ header.global-new {
height: 0px; height: 0px;
position: absolute; position: absolute;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
@include right(12px); @include right(7px);
top: -6px; top: -6px;
width: 0px; width: 0px;
} }
...@@ -607,7 +628,7 @@ header.global-new { ...@@ -607,7 +628,7 @@ header.global-new {
padding: 3px 10px; padding: 3px 10px;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 600;
font-family: $header-sans-serif; font-family: $header-sans-serif;
color: $courseware-navigation-color; color: $courseware-navigation-color;
...@@ -657,14 +678,13 @@ header.global-new { ...@@ -657,14 +678,13 @@ header.global-new {
} }
&.rwd { &.rwd {
nav { .wrapper-header {
max-width: 1180px;
width: 320px; width: 320px;
} }
.mobile-menu-button { .mobile-menu-button {
@include float(left);
display: inline; display: inline;
float: left;
text-decoration: none; text-decoration: none;
color: $m-gray; color: $m-gray;
font-size: 18px; font-size: 18px;
...@@ -679,9 +699,9 @@ header.global-new { ...@@ -679,9 +699,9 @@ header.global-new {
.logo { .logo {
position: absolute; position: absolute;
width: 54px;
left: calc( 50% - 90px );
top: 20px; top: 20px;
@include left(calc(50% - 90px));
width: 54px;
img { img {
width: 54px; width: 54px;
...@@ -721,7 +741,7 @@ header.global-new { ...@@ -721,7 +741,7 @@ header.global-new {
a { a {
color: white; color: white;
padding: 10px; padding: 10px;
font-weight: 300; font-weight: 400;
&:hover, &:hover,
&:focus { &:focus {
...@@ -746,8 +766,9 @@ header.global-new { ...@@ -746,8 +766,9 @@ header.global-new {
} }
@include media( $desktop ) { @include media( $desktop ) {
nav { .wrapper-header {
width: 100%; width: 100%;
min-width: 800px;
} }
.mobile-menu-button { .mobile-menu-button {
...@@ -756,10 +777,9 @@ header.global-new { ...@@ -756,10 +777,9 @@ header.global-new {
.logo { .logo {
position: relative; position: relative;
top: 0;
@include left(0);
width: auto; width: auto;
top: inherit;
left: inherit;
margin-left: ($baseline/2);
img { img {
width: auto; width: auto;
...@@ -778,7 +798,7 @@ header.global-new { ...@@ -778,7 +798,7 @@ header.global-new {
a { a {
color: $courseware-navigation-color; color: $courseware-navigation-color;
padding: 3px 10px; padding: 3px 10px;
font-weight: 500; font-weight: 600;
&:hover, &:hover,
&:focus { &:focus {
...@@ -809,8 +829,8 @@ header.global-new { ...@@ -809,8 +829,8 @@ header.global-new {
} }
@include media( $xl-desktop ) { @include media( $xl-desktop ) {
nav { .wrapper-header {
padding: 17px 10px; padding: 17px 0;
} }
.nav-global, .nav-global,
...@@ -819,10 +839,6 @@ header.global-new { ...@@ -819,10 +839,6 @@ header.global-new {
font-size: 18px; font-size: 18px;
} }
} }
.logo {
margin-left: 0;
}
} }
} }
} }
......
lms/templates/main.html
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
</div> </div>
<%block name="footer"> <%block name="footer">
## Can be overridden by child templates wanting to hide the footer. ## Can be overridden by child templates wanting to hide the footer.
<% <%
if theme_enabled() and not is_microsite(): if theme_enabled() and not is_microsite():
footer_file = 'theme-footer.html' footer_file = 'theme-footer.html'
......
lms/templates/navigation-edx.html
...@@ -37,11 +37,12 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -37,11 +37,12 @@ site_status_msg = get_site_status_msg(course_id)
</%block> </%block>
<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner"> <header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
<nav aria-label="Main"> <div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization"> <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" title="Home page" itemprop="url"> <a href="${marketing_link('ROOT')}" title="Home page" itemprop="url">
<%block name="navigation_logo"> <%block name="navigation_logo">
<img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}" title="${platform_name()}" itemprop="url" /> <img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}" title="${platform_name()}" itemprop="url" />
<span class="sr">${_("Home Page")}</span>
</%block> </%block>
</a> </a>
</h1> </h1>
...@@ -51,28 +52,30 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -51,28 +52,30 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
% if user.is_authenticated(): % if user.is_authenticated():
<div class="left nav-global authenticated"> % if not course or disable_courseware_header:
<%block name="navigation_global_links_authenticated"> <nav aria-label="Main" class="nav-main">
<li class="nav-global-01"> <ul class="left nav-global authenticated">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a> <%block name="navigation_global_links_authenticated">
</li> <li class="nav-global-01">
<li class="nav-global-02"> <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a> </li>
</li> <li class="nav-global-02">
<li class="nav-global-03"> <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a> </li>
</li> <li class="nav-global-03">
</%block> <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</div> </li>
</%block>
</ul>
</nav>
% endif
<ol class="user"> <ul class="user">
<li class="primary"> <li class="primary">
<a href="${reverse('dashboard')}" class="user-link"> <a href="${reverse('dashboard')}" class="user-link">
<i class="icon fa fa-home" aria-hidden="true"></i> <i class="icon fa fa-home" aria-hidden="true"></i>
<span class="sr">${_("Dashboard for:")}</span> <span class="sr">${_("Dashboard for:")}</span>
<div> <div>${user.username}</div>
${user.username}
</div>
</a> </a>
</li> </li>
<li class="primary"> <li class="primary">
...@@ -86,58 +89,61 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -86,58 +89,61 @@ site_status_msg = get_site_status_msg(course_id)
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign out")}</a></li> <li><a href="${reverse('logout')}" role="menuitem">${_("Sign out")}</a></li>
</ul> </ul>
</li> </li>
</ol> </ul>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ol class="user"> <ul class="user">
<li class="primary"> <li class="primary">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}"> <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<i class="icon fa fa-shopping-cart"></i> ${_("Shopping Cart")} <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
</a> </a>
</li> </li>
</ol> </ul>
% endif % endif
% else: % else:
<ol class="left nav-global"> <nav aria-label="Main" class="nav-main">
<%block name="navigation_global_links"> <ul class="left nav-global">
% if microsite.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)): <%block name="navigation_global_links">
<li class="nav-global-01"> <li class="nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a> <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li> </li>
<li class="nav-global-02"> <li class="nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a> <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li> </li>
<li class="nav-global-03"> <li class="nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a> <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li> </li>
% endif </%block>
</%block> </ul>
</ol> </nav>
<div class="right nav-courseware"> <nav aria-label="Account" class="nav-account-management">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']: <div class="right nav-courseware">
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="nav-courseware-01">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="nav-courseware-01">
<a class="cta cta-register" href="/register">${_("Register")}</a>
</div>
% endif
% endif
<div class="nav-courseware-02">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']: % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain: % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a> <div class="nav-courseware-01">
% else: <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
<a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Sign in")}</a> </div>
% endif % else:
<div class="nav-courseware-01">
<a class="cta cta-register" href="/register">${_("Register")}</a>
</div>
% endif
% endif % endif
<div class="nav-courseware-02">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</div>
</div> </div>
</div> </nav>
% endif % endif
</nav> </div>
</header> </header>
% if course: % if course:
<!--[if lte IE 8]> <!--[if lte IE 8]>
......
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