Accessibility issues addressing UX-1573

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

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;
-}
+#seq_content {
 
-.xmodule_SequenceModule nav.sequence-bottom ul li.next a,
-.xmodule_SequenceModule nav.sequence-bottom ul li.prev a {
-
-/*  &: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) =>