From 2a4e141e0e6552cfb20fb50bc9d545395871e5ce Mon Sep 17 00:00:00 2001 From: Chris Rodriguez 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 0bfc824143..69f190b121 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 2f4694b33f..1e7e5f42da 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 51db3f154c..56107e157f 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 name="content">
diff --git a/cms/templates/course-create-rerun.html b/cms/templates/course-create-rerun.html index 8f2a4d8b9f..27e2cf2339 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 name="content"> -
+

diff --git a/common/test/acceptance/tests/lms/test_account_settings.py b/common/test/acceptance/tests/lms/test_account_settings.py index 353b8023b6..f6f935d301 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 03f4f8c4ec..01d0159c99 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 4b319e4b8f..ab81dfd3f2 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 1eefd30573..8fc50262b2 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 6edf915b46..dce93d0ea3 100644 --- a/lms/static/js/spec/search/search_spec.js +++ b/lms/static/js/spec/search/search_spec.js @@ -490,7 +490,7 @@ define([ '
' + '
' + '
' + - '
' + '
' ); TemplateHelpers.installTemplates([ @@ -705,7 +705,7 @@ define([ loadFixtures('js/fixtures/search/dashboard_search_form.html'); appendSetFixtures( '
' + - '
' + '
' ); 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 e6d9665fe8..a67a8198d5 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 f8c8dd5c09..a23634864f 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 a1eab8972b..dc76ae6444 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 745a87ecfa..aa6778c328 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 name="nav_skip">${"#content" if section_title else "#content"} <%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 a9df6c8c1a..459361806a 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 name="nav_skip">${"#content" if section_title else "#content"} <%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 f68e93292f..c520ea2642 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 name="nav_skip">#course-info-progress +<%block name="nav_skip">#content <%block name="js_extra"> diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 337018224c..54861f320e 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -74,7 +74,7 @@ import json

-
+

${_("My Courses")}

diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index 465f34d2c9..444e8aee1d 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">
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 660ed2cd13..1e2a248080 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 name="nav_skip">#instructor-dashboard-content +<%block name="nav_skip">#content <%block name="headextra"> <%static:css group='style-course-vendor'/> diff --git a/lms/templates/main.html b/lms/templates/main.html index 3cc40e4e8c..b45f36ee1e 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 -
+
${self.body()} <%block name="bodyextra"/>
diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html index f8e4fc62ff..89eb7f80c0 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 %} -
+
{% block body %}{% endblock %} {% block bodyextra %}{% endblock %}
diff --git a/lms/templates/ux/reference/teams-base.html b/lms/templates/ux/reference/teams-base.html index 295a78b984..abe0e611f1 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 name="nav_skip">${"#content" if section_title else "#content"} <%block name="js_extra"> diff --git a/lms/templates/ux/reference/teams-create.html b/lms/templates/ux/reference/teams-create.html index c8cce4144e..3b256ed4f7 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 name="nav_skip">${"#content" if section_title else "#content"} <%block name="js_extra"> diff --git a/lms/templates/wiki/article.html b/lms/templates/wiki/article.html index bb1e53b27e..f06d93ea44 100644 --- a/lms/templates/wiki/article.html +++ b/lms/templates/wiki/article.html @@ -13,7 +13,7 @@
-
+
{% if selected_tab != "edit" %}

{{ article.current_revision.title }}

diff --git a/themes/edx.org/lms/templates/dashboard.html b/themes/edx.org/lms/templates/dashboard.html index c921e9c894..410c08a35d 100644 --- a/themes/edx.org/lms/templates/dashboard.html +++ b/themes/edx.org/lms/templates/dashboard.html @@ -75,7 +75,7 @@ import json
-
+

${_("My Courses")}