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 61 additions and 46 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,12 +26,11 @@ header.global {
}
}
ol {
&.left {
.left {
float: left;
}
&.guest {
.guest {
float: right;
}
......@@ -72,7 +71,7 @@ header.global {
}
}
li.primary {
.primary {
margin-right: 5px;
> a {
......@@ -104,14 +103,15 @@ header.global {
}
}
&.user {
.user {
float: right;
margin-top: 4px;
> li.primary {
> .primary {
display: block;
float: left;
margin: 0px;
position: relative;
> a {
margin: 0px;
......@@ -163,7 +163,7 @@ header.global {
}
}
ul.dropdown-menu {
.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
......@@ -232,13 +232,14 @@ 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,12 +351,11 @@ header.global-new {
}
}
ol {
&.left {
.left {
float: left;
}
&.guest {
.guest {
float: right;
}
......@@ -394,7 +394,7 @@ header.global-new {
}
}
li.primary {
.primary {
margin-right: 5px;
> a {
......@@ -425,14 +425,15 @@ header.global-new {
}
}
&.user {
.user {
float: right;
margin-top: 4px;
> li.primary {
> .primary {
display: block;
float: left;
margin: 0px;
position: relative;
> a {
margin: 0px;
......@@ -484,7 +485,7 @@ header.global-new {
}
}
ul.dropdown-menu {
.dropdown-menu {
background: $border-color-4;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
......@@ -553,13 +554,14 @@ 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,19 +107,19 @@ 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">
<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>
......@@ -125,8 +127,8 @@ site_status_msg = get_site_status_msg(course_id)
<a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
% endif
% endif
</li>
</ol>
</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