Merge pull request #6750 from edx/clrux/lms-navigation-content-focus-update

Accessibility issues addressing UX-1573

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -106,10 +106,6 @@ nav.sequence-nav {
         padding: 0;
         position: relative;
 
-/*        &:focus {
-          outline: 0;
-        }
-*/
         &:hover, &:focus {
           background-color: $white;
           background-repeat: no-repeat;
@@ -120,17 +116,6 @@ nav.sequence-nav {
           @extend %ui-depth1;
           background-color: $white;
 
-          // &:after {
-          //   content: '▲';
-          //   position: absolute;
-          //   top: 28px;
-          //   left: 50%;
-          //   z-index: 9999;
-          //   margin-left: -5px;
-          //   font-size: 12px;
-          //   color: #aaa;
-          // }
-
           &:hover, &:focus {
             background-color: $white;
             background-repeat: no-repeat;
@@ -213,7 +198,6 @@ nav.sequence-nav {
           visibility: hidden;
           pointer-events: none;
 
-
           &:empty {
             background: none;
 
@@ -280,10 +264,6 @@ nav.sequence-nav {
           overflow: hidden;
           @include transition(all .2s $ease-in-out-quad 0s);
 
-/*          &:focus {
-            outline: 0;
-          }
-*/
           &:hover, &:focus {
             opacity: 0.5;
           }
@@ -382,11 +362,7 @@ nav.sequence-bottom {
           &.disabled {
             opacity: 0.4;
           }
-
-/*          &:focus {
-            outline: 0;
-          }
-*/        }
+        }
       }
 
       &.prev {
@@ -429,15 +405,10 @@ nav.sequence-bottom {
   }
 }
 
-.xmodule_VerticalModule div.vert-mod > div ul.sequence-nav-buttons {
-  list-style: none !important;
-}
-
-.xmodule_SequenceModule nav.sequence-bottom ul li.next a,
-.xmodule_SequenceModule nav.sequence-bottom ul li.prev a {
+#seq_content {
 
-/*  &:focus {
-    outline: 0;
+  &:focus,
+  &:active {
+    outline: none;
   }
-*/
 }

common/lib/xmodule/xmodule/js/src/sequence/display.coffee

@@ -4,6 +4,7 @@ class @Sequence
     @el = $(element).find('.sequence')
     @contents = @$('.seq_contents')
     @content_container = @$('#seq_content')
+    @sr_container = @$('#sr-is-focusable')
     @num_contents = @contents.length
     @id = @el.data('id')
     @ajaxUrl = @el.data('ajax-url')
@@ -114,6 +115,8 @@ class @Sequence
 
       sequence_links = @content_container.find('a.seqnav')
       sequence_links.click @goto
+
+      @sr_container.focus();
     @$("a.active").blur()
 
   goto: (event) =>

lms/templates/seq_module.html

 <%! from django.utils.translation import ugettext as _ %>
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
-  <nav class="sequence-nav">
+  <nav class="sequence-nav" aria-label="${_('Unit')}" >
     <ul class="sequence-nav-buttons">
       <li class="prev"><a role="button" href="#">${_('Previous')}</a></li>
     </ul>
 
     <div class="sequence-list-wrapper">
-      <ol role="tablist" aria-label="${_('Section Navigation')}" id="sequence-list">
+      <ol role="tablist" id="sequence-list">
         % for idx, item in enumerate(items):
         ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
         ## Make sure it gets updated after ajax calls.
@@ -44,10 +44,11 @@
      ${item['content'] | h}
   </div>
   % endfor
-  <div id="seq_content" role="tabpanel"></div>
+  <div id="sr-is-focusable" tabindex="-1"></div>
+  <div id="seq_content"></div>
 
-  <nav class="sequence-bottom">
-    <ul aria-label="${_('Section Navigation')}" class="sequence-nav-buttons">
+  <nav class="sequence-bottom" aria-label="${_('Section')}">
+    <ul class="sequence-nav-buttons">
       <li class="prev"><a role="button" href="#">${_("Previous")}</a></li>
       <li class="next"><a role="button" href="#">${_("Next")}</a></li>
     </ul>