fix: Muting with MuteToggle sets ARIA value of VolumeBar to 0 (#4099

)

Currently, the ARIA value of VolumeBar tracks the value of volume. It should instead track the position of the slider on VolumeBar, which tracks volume except when the player is muted, in which case it's 0.

Fixes #4064.

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 `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');
+  });
+
 }