Muting with MuteToggle sets ARIA value of VolumeBar to 0

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);
   }
 
   /**

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 `MuteToggle#handleClick` is async, the `volumechange` event
+    // 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');
+  });
+
 }