LMS: fixing skip links and adding a11y tests

2015-09-24 12:55:32 -04:00
parent b9ccff7549
commit 2a4e141e0e
24 changed files with 42 additions and 39 deletions
--- 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;
  }
 }
-
--- 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;
  }
 }

--- 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>

--- 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">
--- 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()
--- 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
            ],
        })
--- 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
            ],
        })

--- 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
            ],
        })
--- 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([
        });

    });
-});
+});
--- 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;
  }
 }
--- 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;
--- 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);
--- 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()}
--- 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()}
--- 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>
--- 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>
--- 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">
--- 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'/>
--- 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>
--- 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>
--- 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">
--- 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">
--- 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>

--- 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>