diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index 116818fb08..df407aee0d 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -535,6 +535,8 @@
.speed-option,
.control-lang {
+ @include border-left($baseline/10 solid rgb(14, 166, 236));
+ font-weight: $font-bold;
color: rgb(14, 166, 236); // UXPL primary accent
}
}
diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
index f3293cf0e4..f7ab39d3f0 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js
@@ -266,6 +266,7 @@
expect($('.closed-captions')).toHaveAttrs({
'lang': 'de'
});
+ expect(link).toHaveAttr('aria-pressed', 'true');
});
it('when clicking on link with current language', function () {
@@ -284,6 +285,7 @@
expect(state.storage.setItem)
.not.toHaveBeenCalledWith('language', 'en');
expect($('.langs-list li.is-active').length).toBe(1);
+ expect(link).toHaveAttr('aria-pressed', 'true');
});
it('open the language toggle on hover', function () {
diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js
index 2a8b5e8b67..f73b1f3c59 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js
@@ -203,16 +203,18 @@
describe('onSpeedChange', function () {
beforeEach(function () {
state = jasmine.initializePlayer();
- $('li[data-speed="1.0"]').addClass('is-active');
+ $('li[data-speed="1.0"]').addClass('is-active').attr('aria-pressed', 'true');
state.videoSpeedControl.setSpeed(0.75);
});
it('set the new speed as active', function () {
- expect($('.video-speeds li[data-speed="1.0"]'))
- .not.toHaveClass('is-active');
- expect($('.video-speeds li[data-speed="0.75"]'))
- .toHaveClass('is-active');
- expect($('.speeds .value')).toHaveHtml('0.75x');
+ expect($('li[data-speed="1.0"]')).not.toHaveClass('is-active');
+ expect($('li[data-speed="1.0"] .speed-option').attr('aria-pressed')).not.toEqual('true');
+
+ expect($('li[data-speed="0.75"]')).toHaveClass('is-active');
+ expect($('li[data-speed="0.75"] .speed-option').attr('aria-pressed')).toEqual('true');
+
+ expect($('.speeds .speed-button .value')).toHaveHtml('0.75x');
});
});
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 986d9ea7ff..1479ae4bcf 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
@@ -95,14 +95,15 @@ function (Iterator) {
* Creates any necessary DOM elements, attach them, and set their,
* initial configuration.
* @param {array} speeds List of speeds available for the player.
+ * @param {string} currentSpeed The current speed set to the player.
*/
- render: function (speeds) {
+ render: function (speeds, currentSpeed) {
var speedsContainer = this.speedsContainer,
reversedSpeeds = speeds.concat().reverse(),
speedsList = $.map(reversedSpeeds, function (speed) {
return [
'',
- ''
@@ -112,6 +113,7 @@ function (Iterator) {
speedsContainer.html(speedsList.join(''));
this.speedLinks = new Iterator(speedsContainer.find('.speed-option'));
this.state.el.find('.secondary-controls').prepend(this.el);
+ this.setActiveSpeed(currentSpeed);
},
/**
@@ -216,17 +218,38 @@ function (Iterator) {
if (speed !== this.currentSpeed || forceUpdate) {
this.speedsContainer
.find('li')
- .removeClass('is-active')
- .siblings("li[data-speed='" + speed + "']")
- .addClass('is-active');
+ .siblings("li[data-speed='" + speed + "']");
- this.speedButton.find('.value').html(speed + 'x');
+ this.speedButton.find('.value').text(speed + 'x');
this.currentSpeed = speed;
if (!silent) {
this.el.trigger('speedchange', [speed, this.state.speed]);
}
}
+
+ this.resetActiveSpeed();
+ this.setActiveSpeed(speed);
+ },
+
+ resetActiveSpeed: function() {
+ var speedOptions = this.speedsContainer.find('li');
+
+ $(speedOptions).each(function(index, el) {
+ $(el).removeClass('is-active')
+ .find('.speed-option')
+ .attr('aria-pressed', 'false');
+ });
+ },
+
+ setActiveSpeed: function(speed) {
+ var speedOption = this.speedsContainer.find('li[data-speed="' + speed + '"]');
+
+ speedOption.addClass('is-active')
+ .find('.speed-option')
+ .attr('aria-pressed', 'true');
+
+ this.speedButton.attr('title', gettext('Video speed: ') + speed + 'x');
},
/**
@@ -244,10 +267,13 @@ function (Iterator) {
* @param {jquery Event} event
*/
clickLinkHandler: function (event) {
- var speed = $(event.currentTarget).parent().data('speed');
-
- this.closeMenu();
+ var el = $(event.currentTarget).parent(),
+ speed = $(el).data('speed');
+
+ this.resetActiveSpeed();
+ this.setActiveSpeed(speed);
this.state.videoCommands.execute('speed', speed);
+ this.closeMenu(true);
return false;
},
diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
index b99a1b1128..1817cc2518 100644
--- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
+++ b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
@@ -662,10 +662,11 @@
$.each(languages, function(code, label) {
var li = $(''),
- link = $('');
+ link = $('');
if (currentLang === code) {
li.addClass('is-active');
+ link.attr('aria-pressed', 'true');
}
li.append(link);
@@ -683,7 +684,11 @@
state.lang = langCode;
el .addClass('is-active')
.siblings('li')
- .removeClass('is-active');
+ .removeClass('is-active')
+ .find('.control-lang')
+ .attr('aria-pressed', 'false');
+
+ $(e.currentTarget).attr('aria-pressed', 'true');
state.el.trigger('language_menu:change', [langCode]);
self.fetchCaption();
@@ -693,6 +698,7 @@
// update the transcript lang attribute
self.subtitlesMenuEl.attr('lang', langCode);
+ self.closeLanguageMenu(e);
}
});
},
@@ -715,7 +721,7 @@
'data-index': index,
'data-start': start[index],
'tabindex': 0
- }).html(text);
+ }).text(text);
return liEl[0];
};