From d34c4a66c761b91c13faefed2df7b0389f6d73b2 Mon Sep 17 00:00:00 2001 From: Diana Huang Date: Wed, 23 Oct 2013 14:10:09 -0400 Subject: [PATCH 1/7] 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 --- cms/static/coffee/spec/main.coffee | 1 + cms/static/sass/_base.scss | 14 ++++++++++++++ cms/templates/base.html | 6 +++++- .../static/js/fixtures/dashboard-fixture.html | 0 .../static/js/spec/accessibility_tools_spec.js | 0 .../static/js/src/accessibility_tools.js | 17 +++++++++++++++++ common/static/js_test.yml | 4 ++-- lms/static/sass/base/_base.scss | 16 ++++++++++++++++ lms/templates/main.html | 3 ++- 9 files changed, 57 insertions(+), 4 deletions(-) rename {lms => common}/static/js/fixtures/dashboard-fixture.html (100%) rename {lms => common}/static/js/spec/accessibility_tools_spec.js (100%) rename {lms => common}/static/js/src/accessibility_tools.js (92%) diff --git a/cms/static/coffee/spec/main.coffee b/cms/static/coffee/spec/main.coffee index bd349a97e3..379e5efc17 100644 --- a/cms/static/coffee/spec/main.coffee +++ b/cms/static/coffee/spec/main.coffee @@ -30,6 +30,7 @@ requirejs.config({ "xmodule": "xmodule_js/src/xmodule", "xblock": "xmodule_js/common_static/coffee/src/xblock", "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", "squire": "xmodule_js/common_static/js/vendor/Squire", "jasmine-jquery": "xmodule_js/common_static/js/vendor/jasmine-jquery", diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 7735a83297..852be14801 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -830,6 +830,20 @@ hr.divider { @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 diff --git a/cms/templates/base.html b/cms/templates/base.html index ded53b8188..734e4b5715 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -29,6 +29,7 @@ + - + }; + + -## js templates - + ## js templates + % if context_course: - + % endif diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 3c53f0f4cf..8e0971acef 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -240,6 +240,13 @@ padding: 0; position: absolute; width: 1px; + + &:focus { + @extend %ui-depth5; + width: auto; + height: auto; + overflow: visible; + } } // extends - content - wrapping diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 1e2383cb58..b23f1855dc 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -286,18 +286,7 @@ mark { 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; - } +// ui - skipnav +.nav-skip { + @extend %text-sr; } - diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 5a5a4fde94..c2c45dd6e0 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -83,6 +83,13 @@ padding: 0; position: absolute; width: 1px; + + &:focus { + @extend %ui-depth5; + width: auto; + height: auto; + overflow: visible; + } } // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases diff --git a/lms/templates/main.html b/lms/templates/main.html index 41d7266480..e06dc02303 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -78,7 +78,14 @@ - + + <%include file="mathjax_accessible.html" /> % if theme_enabled(): @@ -87,7 +94,7 @@ <%include file="navigation.html" /> % endif -
+
${self.body()} <%block name="bodyextra"/>
From 43bdb5da54600a1fa02bc86baccced51e30818ce Mon Sep 17 00:00:00 2001 From: Diana Huang Date: Thu, 24 Oct 2013 09:14:26 -0400 Subject: [PATCH 4/7] Minor fixes to match new HTML and CSS updates. LMS-1311 --- cms/templates/base.html | 1 + common/static/js/src/accessibility_tools.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/cms/templates/base.html b/cms/templates/base.html index ce6522a000..1d02441694 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -1,4 +1,5 @@ ## -*- coding: utf-8 -*- +<%! from django.utils.translation import ugettext as _ %> <%namespace name='static' file='static_content.html'/> diff --git a/common/static/js/src/accessibility_tools.js b/common/static/js/src/accessibility_tools.js index 9e315699d0..757db661cb 100644 --- a/common/static/js/src/accessibility_tools.js +++ b/common/static/js/src/accessibility_tools.js @@ -114,14 +114,14 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) { // see http://stackoverflow.com/questions/6280399/skip-links-not-working-in-chrome/12720183#12720183 // handle things properly for clicks -jQuery('#skip-link a').click(function() { +jQuery('.nav-skip a').click(function() { var href = jQuery(this).attr('href'); if(href) { jQuery(href).attr('tabIndex', -1).focus(); } }); // and for the enter key -jQuery('#skip-link a').keypress(function(e) { +jQuery('.nav-skip a').keypress(function(e) { if(e.which == 13) { var href = jQuery(this).attr('href'); if(href) { From de127775550cc2e0988ac26a05a2ea29b615e242 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 24 Oct 2013 12:37:54 -0400 Subject: [PATCH 5/7] simplifying semantic and stylistic properties of skip nav UI --- cms/static/sass/_base.scss | 18 +++++++++++++++++- cms/templates/base.html | 8 +------- common/static/sass/_mixins.scss | 7 ------- lms/static/sass/base/_base.scss | 17 ++++++++++++++++- lms/static/sass/base/_mixins.scss | 7 ------- lms/templates/main.html | 8 +------- 6 files changed, 35 insertions(+), 30 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index d724af368d..eb7bf55b30 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -833,7 +833,23 @@ hr.divider { // ui - skipnav .nav-skip { - @extend %cont-text-sr; + @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; + } } // ==================== diff --git a/cms/templates/base.html b/cms/templates/base.html index 1d02441694..7968b897dd 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -30,13 +30,7 @@ - + ${_("Skip to this view's content")}