Merge pull request #9909 from edx/clrux/ac-179

AC-179 fixing skip links

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

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

cms/templates/base.html

@@ -63,7 +63,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>
 

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

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

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

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

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

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
+});

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

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;

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

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()}

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()}

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>

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>

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

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

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>

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>

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

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

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>
 

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>