Skip to content

E
edx-platform
Commit d34c4a66 by Diana Huang
Options

Add skip links to both CMS and LMS 

* add HTML for links
* hide links when they are not focused
* when focused, show link (as recommended)
* move accessibility tools to common

LMS-1311
parent 71ece15c
Showing with 57 additions and 4 deletions
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
...@@ -830,6 +830,20 @@ hr.divider { ...@@ -830,6 +830,20 @@ hr.divider {
@extend %cont-text-sr; @extend %cont-text-sr;
} }
/* show skip links on focus */
#skip-link a{
position:absolute;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
}
// ==================== // ====================
// js dependant // js dependant
......
cms/templates/base.html
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<div id="skip-link"><a href="#content">Skip to Content</a></div>
<script type="text/javascript"> <script type="text/javascript">
window.baseUrl = "${settings.STATIC_URL}"; window.baseUrl = "${settings.STATIC_URL}";
var require = { var require = {
...@@ -69,6 +70,7 @@ var require = { ...@@ -69,6 +70,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
...@@ -207,7 +209,7 @@ var require = { ...@@ -207,7 +209,7 @@ 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!
} }
...@@ -242,7 +244,9 @@ require(['js/models/course'], function(Course) { ...@@ -242,7 +244,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,20 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) { ...@@ -109,3 +109,20 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) {
}); });
}); });
}; };
// handle things properly for clicks
jQuery('#skip-link a').click(function() {
var href = jQuery(this).attr('href');
if(href) {
jQuery(href).focus();
}
});
// and for the enter key
jQuery('#skip-link a').keypress(function(e) {
if(e.which == 13) {
var href = jQuery(this).attr('href');
if(href) {
jQuery(href).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,19 @@ mark { ...@@ -285,3 +285,19 @@ mark {
#feedback_form textarea[name="details"] { #feedback_form textarea[name="details"] {
height: 150px; height: 150px;
} }
/* show skip links on focus */
#skip-link a{
position:absolute;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
}
lms/templates/main.html
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
</head> </head>
<body class="<%block name='bodyclass'/>"> <body class="<%block name='bodyclass'/>">
<div id="skip-link"><a href="#content-wrapper">Skip to Content</a></div>
<%include file="mathjax_accessible.html" /> <%include file="mathjax_accessible.html" />
% if theme_enabled(): % if theme_enabled():
...@@ -86,7 +87,7 @@ ...@@ -86,7 +87,7 @@
<%include file="navigation.html" /> <%include file="navigation.html" />
% endif % endif
<section class="content-wrapper"> <section class="content-wrapper" id="content-wrapper">
${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