Skip to content

E
edx-platform
Commit 6f34bb1d by Diana Huang
Options

Merge pull request #1468 from edx/diana/navigation-skip-links 

Add skip links to both CMS and LMS
parents 71ece15c f2f067a3
Showing with 70 additions and 3 deletions
CHANGELOG.rst
...@@ -5,6 +5,8 @@ These are notable changes in edx-platform. This is a rolling list of changes, ...@@ -5,6 +5,8 @@ These are notable changes in edx-platform. This is a rolling list of changes,
in roughly chronological order, most recent first. Add your entries at or near in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected. the top. Include a label indicating the component affected.
Common: Add skip links for accessibility to CMS and LMS (LMS-1311)
Studio: Change course overview page, checklists, assets, and course staff management Studio: Change course overview page, checklists, assets, and course staff management
page URLs to a RESTful interface. Also removed "\listing", which duplicated page URLs to a RESTful interface. Also removed "\listing", which duplicated
"\index". "\index".
......
cms/static/coffee/spec/main.coffee
...@@ -30,6 +30,7 @@ requirejs.config({ ...@@ -30,6 +30,7 @@ requirejs.config({
"xmodule": "xmodule_js/src/xmodule", "xmodule": "xmodule_js/src/xmodule",
"xblock": "xmodule_js/common_static/coffee/src/xblock", "xblock": "xmodule_js/common_static/coffee/src/xblock",
"utility": "xmodule_js/common_static/js/src/utility", "utility": "xmodule_js/common_static/js/src/utility",
"accessibility": "xmodule_js/common_static/js/src/accessibility_tools",
"sinon": "xmodule_js/common_static/js/vendor/sinon-1.7.1", "sinon": "xmodule_js/common_static/js/vendor/sinon-1.7.1",
"squire": "xmodule_js/common_static/js/vendor/Squire", "squire": "xmodule_js/common_static/js/vendor/Squire",
"jasmine-jquery": "xmodule_js/common_static/js/vendor/jasmine-jquery", "jasmine-jquery": "xmodule_js/common_static/js/vendor/jasmine-jquery",
......
cms/static/sass/_base.scss
...@@ -826,10 +826,32 @@ hr.divide { ...@@ -826,10 +826,32 @@ hr.divide {
word-wrap: break-word; word-wrap: break-word;
} }
// ui - semantic + visual divider
hr.divider { hr.divider {
@extend %cont-text-sr; @extend %cont-text-sr;
} }
// ui - skipnav
.nav-skip {
@include font-size(13);
display: block;
position: absolute;
left: 0px;
top: -($baseline*30);
width: 1px;
height: 1px;
overflow: hidden;
background: $white;
border-bottom: 1px solid $gray-l4;
padding: ($baseline*0.75) ($baseline/2);
&:focus, &:active {
position: static;
width: auto;
height: auto;
}
}
// ==================== // ====================
// js dependant // js dependant
......
lms/static/js/src/accessibility_tools.js → common/static/js/src/accessibility_tools.js
...@@ -109,3 +109,23 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) { ...@@ -109,3 +109,23 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) {
}); });
}); });
}; };
// NOTE: This is a gross hack to make the skip links work for Webkit browsers
// see http://stackoverflow.com/questions/6280399/skip-links-not-working-in-chrome/12720183#12720183
// handle things properly for clicks
$('.nav-skip').click(function() {
var href = $(this).attr('href');
if(href) {
$(href).attr('tabIndex', -1).focus();
}
});
// and for the enter key
$('.nav-skip').keypress(function(e) {
if(e.which == 13) {
var href = $(this).attr('href');
if(href) {
$(href).attr('tabIndex', -1).focus();
}
}
});
common/static/js_test.yml
...@@ -69,6 +69,6 @@ spec_paths: ...@@ -69,6 +69,6 @@ spec_paths:
# You can access these within JavaScript code # You can access these within JavaScript code
# at the URL: document.location.href + "/include/" # at the URL: document.location.href + "/include/"
# plus the path to the file (relative to this YAML file) # plus the path to the file (relative to this YAML file)
#fixture_paths: fixture_paths:
# - path/to/fixture - js/fixtures
lms/static/sass/base/_base.scss
...@@ -285,3 +285,23 @@ mark { ...@@ -285,3 +285,23 @@ mark {
#feedback_form textarea[name="details"] { #feedback_form textarea[name="details"] {
height: 150px; height: 150px;
} }
// ui - skipnav
.nav-skip {
display: block;
position: absolute;
left: 0px;
top:- ($baseline*30);
width: 1px;
height: 1px;
overflow: hidden;
background: $white;
border-bottom: 1px solid $border-color-4;
padding: ($baseline*0.75) ($baseline/2);
&:focus, &:active {
position: static;
width: auto;
height: auto;
}
}
lms/templates/main.html
...@@ -78,6 +78,8 @@ ...@@ -78,6 +78,8 @@
</head> </head>
<body class="<%block name='bodyclass'/>"> <body class="<%block name='bodyclass'/>">
<a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
<%include file="mathjax_accessible.html" /> <%include file="mathjax_accessible.html" />
% if theme_enabled(): % if theme_enabled():
...@@ -86,7 +88,7 @@ ...@@ -86,7 +88,7 @@
<%include file="navigation.html" /> <%include file="navigation.html" />
% endif % endif
<section class="content-wrapper"> <section class="content-wrapper" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</section> </section>
......
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