Merge pull request #7711 from edx/clrux/UX-1946-div-focus-fix

Adding outline styles (none) to the sr focus div

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

@@ -4,7 +4,7 @@ class @Sequence
     @el = $(element).find('.sequence')
     @contents = @$('.seq_contents')
     @content_container = @$('#seq_content')
-    @sr_container = @$('#sr-is-focusable')
+    @sr_container = @$('.sr-is-focusable')
     @num_contents = @contents.length
     @id = @el.data('id')
     @ajaxUrl = @el.data('ajax-url')

lms/static/sass/course/courseware/_courseware.scss

@@ -60,6 +60,12 @@ div.course-wrapper {
       }
     }
 
+    .sr-is-focusable,
+    .sr-is-focusable:focus,
+    .sr-is-focusable:active {
+      outline: none;
+    }
+
     .sequential-status-message {
       margin-bottom: $baseline;
       background-color: $gray-l5;

lms/templates/seq_module.html

@@ -30,7 +30,7 @@
     <button class="sequence-nav-button button-next">${_('Next')}</button>
   </div>
 
-  <div id="sr-is-focusable" tabindex="-1"></div>
+  <div class="sr-is-focusable" tabindex="-1"></div>
 
   % for idx, item in enumerate(items):
   <div id="seq_contents_${idx}"