diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js index 281cbb5ad1..8216b26cb4 100644 --- a/src/js/control-bar/volume-control/volume-bar.js +++ b/src/js/control-bar/volume-control/volume-bar.js @@ -105,11 +105,19 @@ class VolumeBar extends Slider { * @listens Player#volumechange */ updateARIAAttributes(event) { - // Current value of volume bar as a percentage - const volume = Math.round((this.player_.volume() * 100)).toString(); + const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_(); - this.el_.setAttribute('aria-valuenow', volume); - this.el_.setAttribute('aria-valuetext', volume + '%'); + this.el_.setAttribute('aria-valuenow', ariaValue); + this.el_.setAttribute('aria-valuetext', ariaValue + '%'); + } + + /** + * Returns the current value of the player volume as a percentage + * + * @private + */ + volumeAsPercentage_() { + return Math.round(this.player_.volume() * 100); } /** diff --git a/test/unit/controls.test.js b/test/unit/controls.test.js index c85548c6eb..de892d308d 100644 --- a/test/unit/controls.test.js +++ b/test/unit/controls.test.js @@ -1,14 +1,23 @@ /* eslint-env qunit */ import VolumeControl from '../../src/js/control-bar/volume-control/volume-control.js'; import MuteToggle from '../../src/js/control-bar/mute-toggle.js'; +import VolumeBar from '../../src/js/control-bar/volume-control/volume-bar.js'; import PlaybackRateMenuButton from '../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js'; import Slider from '../../src/js/slider/slider.js'; import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js'; import TestHelpers from './test-helpers.js'; import document from 'global/document'; import Html5 from '../../src/js/tech/html5.js'; - -QUnit.module('Controls'); +import sinon from 'sinon'; + +QUnit.module('Controls', { + beforeEach(assert) { + this.clock = sinon.useFakeTimers(); + }, + afterEach(assert) { + this.clock.restore(); + } +}); QUnit.test('should hide volume control if it\'s not supported', function(assert) { assert.expect(2); @@ -138,4 +147,37 @@ if (Html5.isSupported()) { assert.equal(player.volume(), 0.5, 'volume is set to lastVolume'); assert.equal(player.muted(), false, 'muted is set to false'); }); + + QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) { + const player = TestHelpers.makePlayer({ techOrder: ['html5'] }); + const volumeBar = new VolumeBar(player); + + this.clock.tick(1); + + assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100'); + }); + + QUnit.test('Muting with MuteToggle should set ARIA value of VolumeBar to 0', function(assert) { + const player = TestHelpers.makePlayer({ techOrder: ['html5'] }); + const volumeBar = new VolumeBar(player); + const muteToggle = new MuteToggle(player); + + this.clock.tick(1); + + assert.equal(player.volume(), 1, 'Volume is 1'); + assert.equal(player.muted(), false, 'Muted is false'); + assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100'); + + muteToggle.handleClick(); + + // Because `volumechange` is triggered asynchronously, it doesn't end up + // getting fired on `player` in the test environment, so we run it + // manually. + player.trigger('volumechange'); + + assert.equal(player.volume(), 1, 'Volume remains 1'); + assert.equal(player.muted(), true, 'Muted is true'); + assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 0, 'ARIA value of VolumeBar is 0'); + }); + }