Merge pull request #933 from edx/jmclaus/bugfix_tabbing_captions

Tabbing through captions

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

@@ -525,12 +525,19 @@ div.video {
       margin-bottom: 8px;
       padding: 0;
       line-height: lh();
+      outline-width: 0px;
+      outline-style: none;
 
       &.current {
         color: #333;
         font-weight: 700;
       }
 
+      &.focused {
+        outline-width: 1px;
+        outline-style: dotted;
+      }
+
       &:hover {
         color: $blue;
       }

common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js

@@ -93,6 +93,7 @@
           $('.subtitles li[data-index]').each(function(index, link) {
             expect($(link)).toHaveData('index', index);
             expect($(link)).toHaveData('start', captionsData.start[index]);
+            expect($(link)).toHaveAttr('tabindex', 0);
             expect($(link)).toHaveText(captionsData.text[index]);
           });
         });
@@ -104,7 +105,13 @@
 
         it('bind all the caption link', function() {
           $('.subtitles li[data-index]').each(function(index, link) {
-            expect($(link)).toHandleWith('click', videoCaption.seekPlayer);
+            expect($(link)).toHandleWith('mouseover', videoCaption.captionMouseOverOut);
+            expect($(link)).toHandleWith('mouseout', videoCaption.captionMouseOverOut);
+            expect($(link)).toHandleWith('mousedown', videoCaption.captionMouseDown);
+            expect($(link)).toHandleWith('click', videoCaption.captionClick);
+            expect($(link)).toHandleWith('focus', videoCaption.captionFocus);
+            expect($(link)).toHandleWith('blur', videoCaption.captionBlur);
+            expect($(link)).toHandleWith('keydown', videoCaption.captionKeyDown);
           });
         });
 
@@ -278,6 +285,7 @@
           $('.subtitles li[data-index]').each(function(index, link) {
             expect($(link)).toHaveData('index', index);
             expect($(link)).toHaveData('start', captionsData.start[index]);
+            expect($(link)).toHaveAttr('tabindex', 0);
             expect($(link)).toHaveText(captionsData.text[index]);
           });
         });
@@ -289,7 +297,13 @@
 
         it('bind all the caption link', function() {
           $('.subtitles li[data-index]').each(function(index, link) {
-            expect($(link)).toHandleWith('click', videoCaption.seekPlayer);
+            expect($(link)).toHandleWith('mouseover', videoCaption.captionMouseOverOut);
+            expect($(link)).toHandleWith('mouseout', videoCaption.captionMouseOverOut);
+            expect($(link)).toHandleWith('mousedown', videoCaption.captionMouseDown);
+            expect($(link)).toHandleWith('click', videoCaption.captionClick);
+            expect($(link)).toHandleWith('focus', videoCaption.captionFocus);
+            expect($(link)).toHandleWith('blur', videoCaption.captionBlur);
+            expect($(link)).toHandleWith('keydown', videoCaption.captionKeyDown);
           });
         });
 
@@ -558,6 +572,99 @@
         });
       });
     });
+
+    describe('caption accessibility', function() {
+      beforeEach(function() {
+        initialize();
+      });
+
+      describe('when getting focus through TAB key', function() {
+        beforeEach(function() {
+          videoCaption.isMouseFocus = false;
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('focus'));
+        });
+
+        it('shows an outline around the caption', function() {
+          expect($('.subtitles li[data-index=0]')).toHaveClass('focused');
+        });
+
+        it('has automatic scrolling disabled', function() {
+          expect(videoCaption.autoScrolling).toBe(false);
+        });
+      });
+
+      describe('when loosing focus through TAB key', function() {
+        beforeEach(function() {
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('blur'));
+        });
+
+        it('does not show an outline around the caption', function() {
+          expect($('.subtitles li[data-index=0]')).not.toHaveClass('focused');
+        });
+
+        it('has automatic scrolling enabled', function() {
+          expect(videoCaption.autoScrolling).toBe(true);
+        });
+      });
+
+      describe('when same caption gets the focus through mouse after having focus through TAB key', function() {
+        beforeEach(function() {
+          videoCaption.isMouseFocus = false;
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('focus'));
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('mousedown'));
+        });
+
+        it('does not show an outline around it', function() {
+          expect($('.subtitles li[data-index=0]')).not.toHaveClass('focused');
+        });
+
+        it('has automatic scrolling enabled', function() {
+          expect(videoCaption.autoScrolling).toBe(true);
+        });
+      });
+
+      describe('when a second caption gets focus through mouse after first had focus through TAB key', function() {
+        beforeEach(function() {
+          videoCaption.isMouseFocus = false;
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('focus'));
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('blur'));
+          videoCaption.isMouseFocus = true;
+          $('.subtitles li[data-index=1]').trigger(jQuery.Event('mousedown'));
+        });
+
+        it('does not show an outline around the first', function() {
+          expect($('.subtitles li[data-index=0]')).not.toHaveClass('focused');
+        });
+
+        it('does not show an outline around the second', function() {
+          expect($('.subtitles li[data-index=1]')).not.toHaveClass('focused');
+        });
+
+        it('has automatic scrolling enabled', function() {
+          expect(videoCaption.autoScrolling).toBe(true);
+        });
+      });
+
+      describe('when enter key is pressed on a caption', function() {
+        beforeEach(function() {
+          var e;
+          spyOn(videoCaption, 'seekPlayer').andCallThrough();
+          videoCaption.isMouseFocus = false;
+          $('.subtitles li[data-index=0]').trigger(jQuery.Event('focus'));
+          e = jQuery.Event('keydown');
+          e.which = 13; // ENTER key
+          $('.subtitles li[data-index=0]').trigger(e);
+        });
+
+        it('shows an outline around it', function() {
+          expect($('.subtitles li[data-index=0]')).toHaveClass('focused');
+        });
+
+        it('calls seekPlayer', function() {
+           expect(videoCaption.seekPlayer).toHaveBeenCalled();
+        });
+      });
+    });
   });
 
 }).call(this);