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 88 additions and 20 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
......
cms/templates/base.html
## -*- coding: utf-8 -*- ## -*- coding: utf-8 -*-
<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<!doctype html> <!doctype html>
...@@ -29,9 +30,11 @@ ...@@ -29,9 +30,11 @@
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<script type="text/javascript"> <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
window.baseUrl = "${settings.STATIC_URL}";
var require = { <script type="text/javascript">
window.baseUrl = "${settings.STATIC_URL}";
var require = {
baseUrl: baseUrl, baseUrl: baseUrl,
waitSeconds: 60, waitSeconds: 60,
paths: { paths: {
...@@ -52,7 +55,6 @@ var require = { ...@@ -52,7 +55,6 @@ var require = {
"jquery.qtip": "js/vendor/jquery.qtip.min", "jquery.qtip": "js/vendor/jquery.qtip.min",
"jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min", "jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
"jquery.flot": "js/vendor/flot/jquery.flot.min", "jquery.flot": "js/vendor/flot/jquery.flot.min",
"jquery.maskedinput": "js/vendor/jquery.maskedinput.min",
"jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload", "jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
"jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport", "jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
"jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill", "jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
...@@ -69,6 +71,7 @@ var require = { ...@@ -69,6 +71,7 @@ var require = {
"xmodule": "/xmodule/xmodule", "xmodule": "/xmodule/xmodule",
"xblock": "coffee/src/xblock", "xblock": "coffee/src/xblock",
"utility": "js/src/utility", "utility": "js/src/utility",
"accessibility": "js/src/accessibility_tools",
"draggabilly": "js/vendor/draggabilly.pkgd", "draggabilly": "js/vendor/draggabilly.pkgd",
// externally hosted files // externally hosted files
...@@ -126,10 +129,6 @@ var require = { ...@@ -126,10 +129,6 @@ var require = {
deps: ["jquery"], deps: ["jquery"],
exports: "jQuery.fn.plot" exports: "jQuery.fn.plot"
}, },
"jquery.maskedinput": {
deps: ["jquery"],
exports: "jQuery.fn.mask"
},
"jquery.fileupload": { "jquery.fileupload": {
deps: ["jquery.iframe-transport"], deps: ["jquery.iframe-transport"],
exports: "jQuery.fn.fileupload" exports: "jQuery.fn.fileupload"
...@@ -207,23 +206,23 @@ var require = { ...@@ -207,23 +206,23 @@ var require = {
deps: ["jquery", "gettext"], deps: ["jquery", "gettext"],
callback: function() { callback: function() {
// load other scripts on every page, after jquery loads // load other scripts on every page, after jquery loads
require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair"]); require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair", "accessibility"]);
// we need "datepair" because it dynamically modifies the page // we need "datepair" because it dynamically modifies the page
// when it is loaded -- yuck! // when it is loaded -- yuck!
} }
}; };
</script> </script>
<script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script> <script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
## js templates ## js templates
<script id="system-feedback-tpl" type="text/template"> <script id="system-feedback-tpl" type="text/template">
<%static:include path="js/system-feedback.underscore" /> <%static:include path="js/system-feedback.underscore" />
</script> </script>
% if context_course: % if context_course:
<script type="text/javascript"> <script type="text/javascript">
require(['js/models/course'], function(Course) { require(['js/models/course'], function(Course) {
window.course = new Course({ window.course = new Course({
id: "${context_course.id}", id: "${context_course.id}",
name: "${context_course.display_name_with_default | h}", name: "${context_course.display_name_with_default | h}",
...@@ -232,7 +231,7 @@ require(['js/models/course'], function(Course) { ...@@ -232,7 +231,7 @@ require(['js/models/course'], function(Course) {
num: "${context_course.location.course | h}", num: "${context_course.location.course | h}",
revision: "${context_course.location.revision | h}" revision: "${context_course.location.revision | h}"
}); });
}); });
</script> </script>
% endif % endif
...@@ -242,7 +241,9 @@ require(['js/models/course'], function(Course) { ...@@ -242,7 +241,9 @@ require(['js/models/course'], function(Course) {
<div id="page-alert"></div> <div id="page-alert"></div>
<div id="content">
<%block name="content"></%block> <%block name="content"></%block>
</div>
% if user.is_authenticated(): % if user.is_authenticated():
<script type="text/javascript"> <script type="text/javascript">
......
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