Skip to content

E
edx-platform
Commit 328c076b by AlasdairSwan
Options

Merge pull request #5333 from edx/alasdair/header-footer-accessibility-updates 

Alasdair/header footer accessibility updates
parents f94c677a f14dd9d3
Showing with 375 additions and 360 deletions
AUTHORS
......@@ -173,3 +173,4 @@ Jason Zhu <fmyzjs@gmail.com>
Marceau Cnudde <marceau.cnudde@gmail.com>
Braden MacDonald <mail@bradenm.com>
Jonathan Piacenti <kelketek@gmail.com>
Alasdair Swan <aswan@edx.org>
lms/static/sass/shared/_header.scss
......@@ -26,208 +26,207 @@ header.global {
}
}
ol {
&.left {
float: left;
.left {
float: left;
}
.guest {
float: right;
}
> li {
display: inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&.guest {
float: right;
a {
letter-spacing: 1px;
vertical-align: middle;
}
}
> li {
li.secondary {
> a {
color: $link-color;
display: block;
font-family: $sans-serif;
display: inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
margin: 0px 30px 0px 0px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin-right: 0px;
}
a {
letter-spacing: 1px;
vertical-align: middle;
&:hover, &:focus {
color: $base-font-color;
}
}
}
li.secondary {
> a {
color: $link-color;
display: block;
font-family: $sans-serif;
display: inline-block;
margin: 0px 30px 0px 0px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin-right: 0px;
}
.primary {
margin-right: 5px;
> a {
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $base-font-color;
display: inline-block;
font-family: $sans-serif;
display: inline-block;
line-height: 1em;
margin: 1px 5px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover, &:focus {
color: $base-font-color;
}
&:last-child {
margin-right: 0px;
}
}
li.primary {
margin-right: 5px;
> a {
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $base-font-color;
display: inline-block;
font-family: $sans-serif;
display: inline-block;
line-height: 1em;
margin: 1px 5px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
}
}
&.user {
float: right;
margin-top: 4px;
.user {
float: right;
margin-top: 4px;
> li.primary {
display: block;
float: left;
> .primary {
display: block;
float: left;
margin: 0px;
position: relative;
> a {
margin: 0px;
@include border-right-radius(0px);
}
&:last-child {
> a {
margin: 0px;
@include border-right-radius(0px);
}
&:last-child {
> a {
border-radius: 0 4px 4px 0;
border-left: none;
padding: 5px 8px 7px 8px;
&.shopping-cart {
border-radius: 4px;
border: 1px solid $border-color-2;
margin-right: 10px;
padding-bottom: 6px;
}
border-radius: 0 4px 4px 0;
border-left: none;
padding: 5px 8px 7px 8px;
&.shopping-cart {
border-radius: 4px;
border: 1px solid $border-color-2;
margin-right: 10px;
padding-bottom: 6px;
}
}
}
}
a.user-link {
padding: 6px 12px 8px 35px;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
a.user-link {
padding: 6px 12px 8px 35px;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
.avatar {
@include background-image(url('../images/small-header-home-icon.png'));
background-repeat: no-repeat;
height: 26px;
display: inline-block;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 4px;
@include transition(all 0.15s linear 0s);
width: 26px;
}
&:hover, &:focus {
.avatar {
@include background-image(url('../images/small-header-home-icon.png'));
background-repeat: no-repeat;
height: 26px;
display: inline-block;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 4px;
@include transition(all 0.15s linear 0s);
width: 26px;
opacity: 0.8;
}
}
}
&:hover, &:focus {
.avatar {
opacity: 0.8;
}
}
.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3;
display: none;
padding: 5px 10px;
position: absolute;
right: 0px;
top: 34px;
width: 170px;
z-index: 3;
&.expanded {
display: block;
}
ul.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3;
display: none;
padding: 5px 10px;
&::before {
background: transparent;
border: {
top: 6px solid $border-color-4;
right: 6px solid $border-color-4;
bottom: 6px solid transparent;
left: 6px solid transparent;
}
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
content: "";
display: block;
height: 0px;
position: absolute;
right: 0px;
top: 34px;
width: 170px;
z-index: 3;
@include transform(rotate(-45deg));
right: 12px;
top: -6px;
width: 0px;
}
&.expanded {
display: block;
}
li {
display: block;
border-top: 1px dotted $border-color-2;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&::before {
background: transparent;
border: {
top: 6px solid $border-color-4;
right: 6px solid $border-color-4;
bottom: 6px solid transparent;
left: 6px solid transparent;
}
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
content: "";
display: block;
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
right: 12px;
top: -6px;
width: 0px;
&:first-child {
border: none;
box-shadow: none;
}
li {
> a {
border: 1px solid transparent;
border-radius: 3px;
@include box-sizing(border-box);
color: $link-color;
cursor: pointer;
display: block;
border-top: 1px dotted $border-color-2;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&:first-child {
border: none;
box-shadow: none;
}
> a {
border: 1px solid transparent;
border-radius: 3px;
@include box-sizing(border-box);
color: $link-color;
cursor: pointer;
display: block;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-overflow: ellipsis;
@include transition(padding 0.15s linear 0s);
white-space: nowrap;
width: 100%;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-overflow: ellipsis;
@include transition(padding 0.15s linear 0s);
white-space: nowrap;
width: 100%;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
}
}
......@@ -237,8 +236,10 @@ header.global {
.nav-global {
margin-top: ($baseline/2);
list-style: none;
float: left;
li {
li,
div {
display: inline-block;
margin: 0 $baseline+1 0 0;
font-size: em(14);
......@@ -282,7 +283,7 @@ header.global {
margin-top: ($baseline/4);
list-style: none;
li {
div {
display: inline-block;
.cta {
......@@ -350,205 +351,204 @@ header.global-new {
}
}
ol {
&.left {
float: left;
.left {
float: left;
}
.guest {
float: right;
}
> li {
display: inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&.guest {
float: right;
a {
vertical-align: middle;
}
}
> li {
li.secondary {
> a {
color: $link-color;
font-family: $sans-serif;
display: inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
margin: 0px 30px 0px 0px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin-right: 0px;
}
a {
vertical-align: middle;
&:hover, &:focus {
color: $base-font-color;
}
}
}
li.secondary {
> a {
color: $link-color;
font-family: $sans-serif;
display: inline-block;
margin: 0px 30px 0px 0px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin-right: 0px;
}
.primary {
margin-right: 5px;
> a {
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $base-font-color;
font-family: $header-sans-serif;
display: inline-block;
line-height: 1em;
margin: 1px 5px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover, &:focus {
color: $base-font-color;
}
&:last-child {
margin-right: 0px;
}
}
li.primary {
margin-right: 5px;
> a {
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $base-font-color;
font-family: $header-sans-serif;
display: inline-block;
line-height: 1em;
margin: 1px 5px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
}
}
.user {
float: right;
margin-top: 4px;
&.user {
float: right;
margin-top: 4px;
> .primary {
display: block;
float: left;
margin: 0px;
position: relative;
> li.primary {
display: block;
float: left;
> a {
margin: 0px;
@include border-right-radius(0px);
}
&:last-child {
> a {
margin: 0px;
@include border-right-radius(0px);
}
&:last-child {
> a {
border-radius: 0 4px 4px 0;
border-left: none;
padding: 5px 8px 7px 8px;
&.shopping-cart {
border-radius: 4px;
border: 1px solid $border-color-2;
margin-right: 10px;
padding-bottom: 6px;
}
border-radius: 0 4px 4px 0;
border-left: none;
padding: 5px 8px 7px 8px;
&.shopping-cart {
border-radius: 4px;
border: 1px solid $border-color-2;
margin-right: 10px;
padding-bottom: 6px;
}
}
}
}
a.user-link {
padding: 6px 12px 8px 35px;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
a.user-link {
padding: 6px 12px 8px 35px;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
.avatar {
@include background-image(url('../images/small-header-home-icon.png'));
background-repeat: no-repeat;
height: 26px;
display: inline-block;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 4px;
@include transition(all 0.15s linear 0s);
width: 26px;
}
&:hover, &:focus {
.avatar {
@include background-image(url('../images/small-header-home-icon.png'));
background-repeat: no-repeat;
height: 26px;
display: inline-block;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 4px;
@include transition(all 0.15s linear 0s);
width: 26px;
opacity: 0.8;
}
}
}
&:hover, &:focus {
.avatar {
opacity: 0.8;
}
}
.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3;
display: none;
padding: 5px 10px;
position: absolute;
right: 0px;
top: 34px;
width: 170px;
z-index: 3;
&.expanded {
display: block;
}
ul.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3;
display: none;
padding: 5px 10px;
&::before {
background: transparent;
border: {
top: 6px solid $border-color-4;
right: 6px solid $border-color-4;
bottom: 6px solid transparent;
left: 6px solid transparent;
}
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
content: "";
display: block;
height: 0px;
position: absolute;
right: 0px;
top: 34px;
width: 170px;
z-index: 3;
@include transform(rotate(-45deg));
right: 12px;
top: -6px;
width: 0px;
}
&.expanded {
display: block;
}
li {
display: block;
border-top: 1px dotted $border-color-2;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&::before {
background: transparent;
border: {
top: 6px solid $border-color-4;
right: 6px solid $border-color-4;
bottom: 6px solid transparent;
left: 6px solid transparent;
}
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
content: "";
display: block;
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
right: 12px;
top: -6px;
width: 0px;
&:first-child {
border: none;
box-shadow: none;
}
li {
> a {
border: 1px solid transparent;
border-radius: 3px;
@include box-sizing(border-box);
color: $link-color;
cursor: pointer;
display: block;
border-top: 1px dotted $border-color-2;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&:first-child {
border: none;
box-shadow: none;
}
> a {
border: 1px solid transparent;
border-radius: 3px;
@include box-sizing(border-box);
color: $link-color;
cursor: pointer;
display: block;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-overflow: ellipsis;
@include transition(padding 0.15s linear 0s);
white-space: nowrap;
width: 100%;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-overflow: ellipsis;
@include transition(padding 0.15s linear 0s);
white-space: nowrap;
width: 100%;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
}
}
......@@ -558,8 +558,10 @@ header.global-new {
.nav-global {
margin-top: ($baseline/2);
list-style: none;
float: left;
li {
li,
div {
display: inline-block;
margin: 0 $baseline+1 0 0;
text-transform: uppercase;
......@@ -587,12 +589,22 @@ header.global-new {
}
}
.nav-courseware {
@extend .nav-global;
float: right;
li {
div {
display: inline-block;
margin: 0 21px 0 0;
text-transform: uppercase;
letter-spacing: 0!important;
position: relative;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
a {
&.nav-courseware-button {
padding: 5px 45px 5px 45px;
......
lms/templates/footer-edx-new.html
......@@ -5,7 +5,7 @@
## WARNING: These files are specific to edx.org and are not used in installations outside of that domain. Open edX users will want to use the file "footer.html" for any changes or overrides.
<div class="wrapper wrapper-footer edx-footer edx-footer-new">
<footer id="footer-global" class="footer-global" role="contentinfo">
<footer id="footer-global" class="footer-global" role="contentinfo" aria-label="Footer">
<div class="footer-about">
<h2 class="sr footer-about-title">${_("About edX")}</h2>
......@@ -40,7 +40,7 @@
</div>
</div>
<div class="footer-nav">
<nav class="footer-nav" role="navigation" aria-label="About Us">
<h2 class="footer-nav-title">${_("About & Company Info")}</h2>
<div class="footer-nav-links">
......@@ -58,30 +58,30 @@
<a href="${marketing_link('DONATE')}" class="has-emphasis"><span class="copy">${_("Donate to edX")}</span></a>
<a href="${marketing_link('JOBS')}" class="has-emphasis"><span class="copy">${_("Jobs at edX")}</span></a>
</div>
</div>
</nav>
<div class="footer-follow">
<h2 class="footer-follow-title">${_("Follow Us")}</h2>
<div class="footer-follow-links">
<a href="${settings.PLATFORM_TWITTER_URL}" title="Twitter">
<i class="icon icon-twitter"></i>
<i class="icon icon-twitter element-invisible"></i>
<span class="copy">${_("Twitter")}</span>
</a>
<a href="${settings.PLATFORM_FACEBOOK_ACCOUNT}" title="Facebook">
<i class="icon icon-facebook-sign"></i>
<i class="icon icon-facebook-sign element-invisible"></i>
<span class="copy">${_("Facebook")}</span>
</a>
<a href="${settings.PLATFORM_MEETUP_URL}" title="Meetup">
<i class="icon icon-calendar"></i>
<i class="icon icon-calendar element-invisible"></i>
<span class="copy">${_("Meetup")}</span>
</a>
<a href="${settings.PLATFORM_LINKEDIN_URL}" title="LinkedIn">
<i class="icon icon-linkedin-sign"></i>
<i class="icon icon-linkedin-sign element-invisible"></i>
<span class="copy">${_("LinkedIn")}</span>
</a>
<a href="${settings.PLATFORM_GOOGLE_PLUS_URL}" title="Google+">
<i class="icon icon-google-plus-sign"></i>
<i class="icon icon-google-plus-sign element-invisible"></i>
<span class="copy">${_("Google+")}</span>
</a>
</div>
......
lms/templates/navigation.html
......@@ -36,12 +36,12 @@ site_status_msg = get_site_status_msg(course_id)
% endif
</%block>
<header class="${"global slim" if course else "global-new"}" aria-label="${_('Global Navigation')}">
<nav>
<h1 class="logo">
<a href="${marketing_link('ROOT')}">
<header class="${"global slim" if course else "global-new"}" aria-label="Main" role="banner">
<nav aria-label="Main">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" title="Home page" itemprop="url">
<%block name="navigation_logo">
<img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}"/>
<img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}" title="${platform_name()}" itemprop="url" />
</%block>
</a>
</h1>
......@@ -51,15 +51,16 @@ site_status_msg = get_site_status_msg(course_id)
% endif
% if user.is_authenticated():
<ol class="left nav-global authenticated">
<div class="left nav-global authenticated">
<%block name="navigation_global_links_authenticated">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="nav-global-01">
<div class="nav-global-01">
<a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
</li>
</div>
% endif
</%block>
</ol>
</div>
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
......@@ -79,6 +80,7 @@ site_status_msg = get_site_status_msg(course_id)
</ul>
</li>
</ol>
% if display_shopping_cart: # see shoppingcart.context_processor.user_has_cart_context_processor
<ol class="user">
<li class="primary">
......@@ -105,28 +107,28 @@ site_status_msg = get_site_status_msg(course_id)
</%block>
</ol>
<ol class="right nav-courseware">
<div class="right nav-courseware">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-courseware-01">
<div class="nav-courseware-01">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</li>
</div>
% else:
<li class="nav-courseware-01">
<div class="nav-courseware-01">
<a class="cta cta-register" href="/register">${_("Register")}</a>
</li>
</div>
% endif
% endif
<li 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()}">${_("Log in")}</a>
% else:
<a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
% endif
% endif
</li>
</ol>
<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()}">${_("Log in")}</a>
% else:
<a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
% endif
% endif
</div>
</div>
% endif
</nav>
</header>
......
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