From 2a4e141e0e6552cfb20fb50bc9d545395871e5ce Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Thu, 24 Sep 2015 12:55:32 -0400
Subject: [PATCH] LMS: fixing skip links and adding a11y tests
---
cms/static/sass/_base.scss | 12 ++++++------
cms/static/sass/elements/_navigation.scss | 11 ++++++-----
cms/templates/base.html | 2 +-
cms/templates/course-create-rerun.html | 2 +-
.../acceptance/tests/lms/test_account_settings.py | 1 -
.../acceptance/tests/lms/test_learner_profile.py | 1 -
.../test/acceptance/tests/lms/test_lms_dashboard.py | 3 +--
.../acceptance/tests/studio/test_studio_library.py | 1 -
lms/static/js/spec/search/search_spec.js | 6 +++---
lms/static/sass/base/_base.scss | 11 ++++++-----
lms/static/sass/course/instructor/_instructor_2.scss | 2 +-
lms/static/sass/multicourse/_dashboard.scss | 4 ++++
lms/templates/courseware/courseware-chromeless.html | 2 +-
lms/templates/courseware/courseware.html | 2 +-
lms/templates/courseware/progress.html | 2 +-
lms/templates/dashboard.html | 2 +-
lms/templates/discussion/index.html | 3 ++-
.../instructor_dashboard_2.html | 2 +-
lms/templates/main.html | 2 +-
lms/templates/main_django.html | 2 +-
lms/templates/ux/reference/teams-base.html | 2 +-
lms/templates/ux/reference/teams-create.html | 2 +-
lms/templates/wiki/article.html | 2 +-
themes/edx.org/lms/templates/dashboard.html | 2 +-
24 files changed, 42 insertions(+), 39 deletions(-)
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 0bfc824143d..69f190b121b 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -648,21 +648,22 @@ hr.divider {
// ui - skipnav
.nav-skip {
@extend %t-action3;
- display: block;
+ display: inline-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;
+ &:focus,
+ &:active {
+ position: relative;
+ top: auto;
width: auto;
height: auto;
+ margin: 0;
}
}
@@ -725,4 +726,3 @@ hr.divider {
color: $gray-l1;
}
}
-
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 2f4694b33fc..1e7e5f42da2 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -25,21 +25,22 @@ nav {
// skip navigation
.nav-skip {
@include font-size(13);
- display: block;
+ display: inline-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;
+ &:focus,
+ &:active {
+ position: relative;
+ top: auto;
width: auto;
height: auto;
+ margin: 0;
}
}
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 51db3f154cf..56107e157f5 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -62,7 +62,7 @@ from openedx.core.djangolib.js_utils import (
<%block name="page_alert"></%block>
</div>
- <div id="content">
+ <div id="content" tabindex="-1">
<%block name="content"></%block>
</div>
diff --git a/cms/templates/course-create-rerun.html b/cms/templates/course-create-rerun.html
index 8f2a4d8b9fb..27e2cf2339e 100644
--- a/cms/templates/course-create-rerun.html
+++ b/cms/templates/course-create-rerun.html
@@ -21,7 +21,7 @@ from django.template.defaultfilters import escapejs
</%block>
<%block name="content">
-<div id="content">
+<div id="content" tabindex="-1">
<div class="wrapper-mast wrapper">
<header class="mast mast-wizard has-actions">
<h1 class="page-header">
diff --git a/common/test/acceptance/tests/lms/test_account_settings.py b/common/test/acceptance/tests/lms/test_account_settings.py
index 353b8023b62..f6f935d301e 100644
--- a/common/test/acceptance/tests/lms/test_account_settings.py
+++ b/common/test/acceptance/tests/lms/test_account_settings.py
@@ -462,7 +462,6 @@ class AccountSettingsA11yTest(AccountSettingsTestMixin, WebAppTest):
self.account_settings_page.a11y_audit.config.set_rules({
'ignore': [
'link-href', # TODO: AC-233, AC-238
- 'skip-link', # TODO: AC-179
],
})
self.account_settings_page.a11y_audit.check_for_accessibility_errors()
diff --git a/common/test/acceptance/tests/lms/test_learner_profile.py b/common/test/acceptance/tests/lms/test_learner_profile.py
index 03f4f8c4ec4..01d0159c998 100644
--- a/common/test/acceptance/tests/lms/test_learner_profile.py
+++ b/common/test/acceptance/tests/lms/test_learner_profile.py
@@ -795,7 +795,6 @@ class LearnerProfileA11yTest(LearnerProfileTestMixin, WebAppTest):
profile_page.a11y_audit.config.set_rules({
"ignore": [
- 'skip-link', # TODO: AC-179
'link-href', # TODO: AC-231
],
})
diff --git a/common/test/acceptance/tests/lms/test_lms_dashboard.py b/common/test/acceptance/tests/lms/test_lms_dashboard.py
index 4b319e4b8f0..ab81dfd3f29 100644
--- a/common/test/acceptance/tests/lms/test_lms_dashboard.py
+++ b/common/test/acceptance/tests/lms/test_lms_dashboard.py
@@ -235,8 +235,7 @@ class LmsDashboardA11yTest(BaseLmsDashboardTest):
self.dashboard_page.a11y_audit.config.set_rules({
"ignore": [
- 'skip-link', # TODO: AC-179
- 'link-href', # TODO: AC-238, AC-179
+ 'link-href', # TODO: AC-238
],
})
diff --git a/common/test/acceptance/tests/studio/test_studio_library.py b/common/test/acceptance/tests/studio/test_studio_library.py
index 1eefd30573a..8fc50262b24 100644
--- a/common/test/acceptance/tests/studio/test_studio_library.py
+++ b/common/test/acceptance/tests/studio/test_studio_library.py
@@ -659,7 +659,6 @@ class StudioLibraryA11yTest(StudioLibraryTest):
'color-contrast', # TODO: AC-225
'link-href', # TODO: AC-226
'nav-aria-label', # TODO: AC-227
- 'skip-link', # TODO: AC-228
'icon-aria-hidden', # TODO: AC-229
],
})
diff --git a/lms/static/js/spec/search/search_spec.js b/lms/static/js/spec/search/search_spec.js
index 6edf915b46d..dce93d0ea3e 100644
--- a/lms/static/js/spec/search/search_spec.js
+++ b/lms/static/js/spec/search/search_spec.js
@@ -490,7 +490,7 @@ define([
'<div class="courseware-results"></div>' +
'<section id="course-content"></section>' +
'<section id="dashboard-search-results"></section>' +
- '<section id="my-courses"></section>'
+ '<section id="my-courses" tabindex="-1"></section>'
);
TemplateHelpers.installTemplates([
@@ -705,7 +705,7 @@ define([
loadFixtures('js/fixtures/search/dashboard_search_form.html');
appendSetFixtures(
'<section id="dashboard-search-results"></section>' +
- '<section id="my-courses"></section>'
+ '<section id="my-courses" tabindex="-1"></section>'
);
loadTemplates.call(this);
DashboardSearchFactory();
@@ -753,4 +753,4 @@ define([
});
});
-});
\ No newline at end of file
+});
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index e6d9665fe81..a67a8198d52 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -336,20 +336,21 @@ mark {
.nav-skip {
@extend %ui-print-excluded;
- display: block;
+ display: inline-block;
position: absolute;
left: 0;
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;
+ &:focus,
+ &:active {
+ position: relative;
+ top: auto;
width: auto;
height: auto;
+ margin: 0;
}
}
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index f8c8dd5c099..a23634864ff 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -1712,7 +1712,7 @@ input[name="subject"] {
height: 40px;
border-radius: 3px;
}
- #coupon-content, #course-content, #registration-content, #regcode-content {
+ #coupon-content, #course-content, #content, #registration-content, #regcode-content {
padding: $baseline;
header {
margin: 0;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index a1eab8972b3..dc76ae64448 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -316,6 +316,10 @@
// ====================
.dashboard .my-courses {
+ &:focus {
+ outline: none;
+ }
+
// UI: individual course item
.course {
@include box-sizing(box);
diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html
index 745a87ecfab..aa6778c3285 100644
--- a/lms/templates/courseware/courseware-chromeless.html
+++ b/lms/templates/courseware/courseware-chromeless.html
@@ -37,7 +37,7 @@ ${static.get_page_title_breadcrumbs(course_name())}
<%static:css group='style-student-notes'/>
% endif
-<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
+<%block name="nav_skip">${"#content" if section_title else "#content"}</%block>
<%include file="../discussion/_js_head_dependencies.html" />
${fragment.head_html()}
diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index a9df6c8c1aa..459361806a9 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -62,7 +62,7 @@ ${static.get_page_title_breadcrumbs(course_name())}
<%static:css group='style-student-notes'/>
% endif
-<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
+<%block name="nav_skip">${"#content" if section_title else "#content"}</%block>
<%include file="../discussion/_js_head_dependencies.html" />
${fragment.head_html()}
diff --git a/lms/templates/courseware/progress.html b/lms/templates/courseware/progress.html
index f68e93292fc..c520ea26424 100644
--- a/lms/templates/courseware/progress.html
+++ b/lms/templates/courseware/progress.html
@@ -18,7 +18,7 @@ from django.utils.http import urlquote_plus
<%namespace name="progress_graph" file="/courseware/progress_graph.js"/>
<%block name="pagetitle">${_("{course_number} Progress").format(course_number=course.display_number_with_default) | h}</%block>
-<%block name="nav_skip">#course-info-progress</%block>
+<%block name="nav_skip">#content</%block>
<%block name="js_extra">
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js') | h}"></script>
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index 337018224cc..54861f320e7 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -74,7 +74,7 @@ import json
</div>
<section class="container dashboard" id="dashboard-main">
- <section class="my-courses" id="my-courses" role="main" aria-label="Content">
+ <section class="my-courses" id="my-courses" role="main" tabindex="-1">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("My Courses")}</h2>
</header>
diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html
index 465f34d2c9a..444e8aee1d5 100644
--- a/lms/templates/discussion/index.html
+++ b/lms/templates/discussion/index.html
@@ -39,7 +39,8 @@ from django.core.urlresolvers import reverse
data-sort-preference="${sort_preference | h}"
data-flag-moderator="${flag_moderator | h}"
data-user-cohort-id="${user_cohort | h}"
- data-course-settings="${course_settings | h}">
+ data-course-settings="${course_settings | h}"
+ tabindex="-1">
<div class="discussion-body">
<div class="forum-nav" role="complementary" aria-label="${_("Discussion thread list")}"></div>
<div class="discussion-column" role="main" aria-label="Discussion" id="discussion-column">
diff --git a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
index 660ed2cd139..1e2a2480802 100644
--- a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
+++ b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
@@ -20,7 +20,7 @@ from django.core.urlresolvers import reverse
## 6. And tests go in lms/djangoapps/instructor/tests/
<%block name="pagetitle">${_("Instructor Dashboard")}</%block>
-<%block name="nav_skip">#instructor-dashboard-content</%block>
+<%block name="nav_skip">#content</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 3cc40e4e8cd..b45f36ee1eb 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -124,7 +124,7 @@ from branding import api as branding_api
<%include file="${static.get_template_path('header.html')}" />
% endif
- <div class="content-wrapper" id="content">
+ <div role="main" class="content-wrapper" id="content" tabindex="-1">
${self.body()}
<%block name="bodyextra"/>
</div>
diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html
index f8e4fc62ff9..89eb7f80c05 100644
--- a/lms/templates/main_django.html
+++ b/lms/templates/main_django.html
@@ -30,7 +30,7 @@
{% with course=request.course %}
{% include "header.html"|microsite_template_path %}
{% endwith %}
- <div class="content-wrapper" id="content">
+ <div role="main" class="content-wrapper" id="content" tabindex="-1">
{% block body %}{% endblock %}
{% block bodyextra %}{% endblock %}
</div>
diff --git a/lms/templates/ux/reference/teams-base.html b/lms/templates/ux/reference/teams-base.html
index 295a78b984d..abe0e611f1d 100644
--- a/lms/templates/ux/reference/teams-base.html
+++ b/lms/templates/ux/reference/teams-base.html
@@ -95,7 +95,7 @@ Teams | Course name
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
-<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
+<%block name="nav_skip">${"#content" if section_title else "#content"}</%block>
</%block>
<%block name="js_extra">
diff --git a/lms/templates/ux/reference/teams-create.html b/lms/templates/ux/reference/teams-create.html
index c8cce4144e5..3b256ed4f7a 100644
--- a/lms/templates/ux/reference/teams-create.html
+++ b/lms/templates/ux/reference/teams-create.html
@@ -94,7 +94,7 @@ Create New Team | [Course name]
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
-<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
+<%block name="nav_skip">${"#content" if section_title else "#content"}</%block>
</%block>
<%block name="js_extra">
diff --git a/lms/templates/wiki/article.html b/lms/templates/wiki/article.html
index bb1e53b27e3..f06d93ea440 100644
--- a/lms/templates/wiki/article.html
+++ b/lms/templates/wiki/article.html
@@ -13,7 +13,7 @@
<div class="article-wrapper">
- <article class="main-article" id="main-article">
+ <article class="main-article" id="main-article" tabindex="-1">
{% if selected_tab != "edit" %}
<h1>{{ article.current_revision.title }}</h1>
diff --git a/themes/edx.org/lms/templates/dashboard.html b/themes/edx.org/lms/templates/dashboard.html
index c921e9c8946..410c08a35d4 100644
--- a/themes/edx.org/lms/templates/dashboard.html
+++ b/themes/edx.org/lms/templates/dashboard.html
@@ -75,7 +75,7 @@ import json
</div>
<section class="container dashboard" id="dashboard-main">
- <section class="my-courses" id="my-courses" role="main" aria-label="Content">
+ <section class="my-courses" id="my-courses" role="main" aria-label="Content" tabindex="-1">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("My Courses")}</h2>
</header>
--
GitLab