LMS: fixing skip links and adding a11y tests

openedx · Feb 16, 2016 · c2b1d03 · c2b1d03
1 parent b9ccff7
commit c2b1d03
Show file tree

Hide file tree

Showing 23 changed files with 40 additions and 38 deletions.
diff --git 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
@@ -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
@@ -62,7 +62,7 @@
       <%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
@@ -21,7 +21,7 @@
 </%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
@@ -462,7 +462,6 @@ def test_account_settings_a11y(self):
         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
@@ -795,7 +795,6 @@ def test_read_only_learner_profile_a11y(self):
 
         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
@@ -235,8 +235,7 @@ def test_dashboard_course_listings_a11y(self):
 
         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
@@ -659,7 +659,6 @@ def test_lib_edit_page_a11y(self):
                 '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
@@ -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([
         });
 
     });
-});
+});
diff --git 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
@@ -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
@@ -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
@@ -37,7 +37,7 @@
 <%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
@@ -62,7 +62,7 @@
 <%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
@@ -18,7 +18,7 @@
 <%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
@@ -74,7 +74,7 @@
 </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/instructor/instructor_dashboard_2/instructor_dashboard_2.html b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
@@ -20,7 +20,7 @@
 ## 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
@@ -124,7 +124,7 @@
         <%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
@@ -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
@@ -95,7 +95,7 @@ <h2><span class="provider">PlantsX:</span> GAR_123 Wild Life</h2>
 <%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
@@ -94,7 +94,7 @@ <h2><span class="provider">PlantsX:</span> GAR_123 Wild Life</h2>
 <%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
@@ -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
@@ -75,7 +75,7 @@
 </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>