diff --git a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
index 90154d20799e219f598c90230d2d5be2bb94ef78..b378ba7bd0a2cb04e653f0a33d15d8b5ee6e7d9e 100644
--- a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
+++ b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
@@ -125,6 +125,9 @@ function () {
// We store the fact that previous element that lost focus was
// the volume clontrol.
state.volumeBlur = true;
+ // The following field is used in video_speed_control to track
+ // the element that had the focus.
+ state.previousFocus = 'volume';
});
}
diff --git a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
index 91d2ba6fba75d46d71eaf57b01cdc2eb69caafc0..687359c183d1d2bb8557c76c5431085fb6bef574 100644
--- a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
+++ b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
@@ -153,69 +153,97 @@ function () {
state.videoSpeedControl.el.removeClass('open');
});
+
+ // ******************************
+ // The tabbing will cycle through the elements in the following
+ // order:
+ // 1. Play button
+ // 2. Speed button
+ // 3. Fastest speed called firstSpeed
+ // 4. Intermediary speed called otherSpeed
+ // 5. Slowest speed called lastSpeed
+ // 6. Sound button
+ // This field will keep track of where the focus is coming from.
+ state.previousFocus = '';
+
+
// ******************************
// Attach 'focus', and 'blur' events to the speed button which
// either brings up the speed dialog with individual speed entries,
// or closes it.
state.videoSpeedControl.el.children('a')
.on('focus', function () {
- // If the focus is comming from the first speed entry, this
- // means we are tabbing backwards. In this case we have to
- // hide the speed entries which will allow us to change the
- // focus further backwards.
- if (state.firstSpeedBlur === true) {
- state.videoSpeedControl.el.removeClass('open');
-
- state.firstSpeedBlur = false;
- }
-
- // If the focus is comming from some other element, show
- // the drop down with the speed entries.
- else {
- state.videoSpeedControl.el.addClass('open');
+ // If the focus is coming from the first speed entry
+ // (tabbing backwards) or last speed entry (tabbing forward)
+ // hide the speed entries dialog.
+ if (state.previousFocus === 'firstSpeed' ||
+ state.previousFocus === 'lastSpeed') {
+ state.videoSpeedControl.el.removeClass('open');
}
})
.on('blur', function () {
- // When the focus leaves this element, if the speed entries
- // dialog is shown (tabbing forwards), then we will set
- // focus to the first speed entry.
- //
- // If the selector does not select anything, then this
- // means that the speed entries dialog is closed, and we
- // are tabbing backwads. The browser will select the
- // previous element to tab to by itself.
- state.videoSpeedControl.videoSpeedsEl
+ // When the focus leaves this element, the speed entries
+ // dialog will be shown.
+
+ // If we are tabbing forward (previous focus is empty ie
+ // play button), we open the dialog and set focus on the
+ // first speed entry.
+ if (state.previousFocus === '') {
+ state.videoSpeedControl.el.addClass('open');
+ state.videoSpeedControl.videoSpeedsEl
.find('a.speed_link:first')
.focus();
+ }
+
+ // If we are tabbing backwards (previous focus is volume
+ // button), we open the dialog and set focus on the
+ // last speed entry.
+ if (state.previousFocus === 'volume') {
+ state.videoSpeedControl.el.addClass('open');
+ state.videoSpeedControl.videoSpeedsEl
+ .find('a.speed_link:last')
+ .focus();
+ }
+
+ state.previousFocus = '';
});
// ******************************
- // Attach 'focus', and 'blur' events to elements which represent
- // individual speed entries.
+ // Attach 'blur' event to elements which represent individual
+ // speed entries and use it to track the origin of the focus
speedLinks = state.videoSpeedControl.videoSpeedsEl
.find('a.speed_link');
- speedLinks.last().on('blur', function () {
- // If we have reached the last speed entry, and the focus
- // changes to the next element, we need to hide the speeds
- // control drop-down.
- state.videoSpeedControl.el.removeClass('open');
- });
speedLinks.first().on('blur', function () {
- // This flag will indicate that the focus to the next
- // element that will receive it is comming from the first
- // speed entry.
- //
- // This flag will be used to correctly handle scenario of
- // tabbing backwards.
- state.firstSpeedBlur = true;
+ // The previous focus is a speed entry (we are tabbing
+ // backwards), the dialog will close, set focus on the speed
+ // button and track the focus on first speed.
+ if (state.previousFocus === 'otherSpeed') {
+ state.previousFocus = 'firstSpeed';
+ state.videoSpeedControl.el.children('a').focus();
+ }
});
- speedLinks.on('focus', function () {
- // Clear the flag which is only set when we are un-focusing
- // (the blur event) from the first speed entry.
- state.firstSpeedBlur = false;
+
+ // Track the focus on intermediary speeds.
+ speedLinks
+ .filter(function (index) {
+ return index === 1 || index === 2
+ })
+ .on('blur', function () {
+ state.previousFocus = 'otherSpeed';
+ });
+
+ speedLinks.last().on('blur', function () {
+ // The previous focus is a speed entry (we are tabbing
+ // forward), the dialog will close, set focus on the speed
+ // button and track the focus on last speed.
+ if (state.previousFocus === 'otherSpeed') {
+ state.previousFocus = 'lastSpeed';
+ state.videoSpeedControl.el.children('a').focus();
+ }
});
+
}
}