js: Add volume status element to volume slider

This fixes mediaelement/mediaelement#2950 and
mediaelement/mediaelement#2976, and is a full
backport of mediaelement/mediaelement#2988.

Co-authored-by: Raphael Krusenbaum <rkrusenb-git@noreply.materna.group>
Ref: ADA-667

Author: awilfox

app/assets/javascripts/mediaelement-and-player.js

@@ -3037,7 +3037,7 @@ Object.assign(_player2.default.prototype, {
 		    mute = _document2.default.createElement('div');
 
 		mute.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'volume-button ' + t.options.classPrefix + 'mute';
-		mute.innerHTML = mode === 'horizontal' ? (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.options.classPrefix + 'horizontal-volume-slider') : (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.options.classPrefix + 'volume-slider') + ('<a class="' + t.options.classPrefix + 'volume-slider" ') + ('aria-label="' + _i18n2.default.t('mejs.volume-slider') + '" aria-valuemin="0" aria-valuemax="100" role="slider" ') + 'aria-orientation="vertical">' + ('<span class="' + t.options.classPrefix + 'offscreen" id="' + t.options.classPrefix + 'volume-slider">' + volumeControlText + '</span>') + ('<div class="' + t.options.classPrefix + 'volume-total">') + ('<div class="' + t.options.classPrefix + 'volume-current"></div>') + ('<div class="' + t.options.classPrefix + 'volume-handle"></div>') + '</div>' + '</a>';
+		mute.innerHTML = mode === 'horizontal' ? (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.id + '_volume-slider') : (0, _generate.generateControlButton)(t.id, muteText, muteText, '' + t.media.options.iconSprite, ['icon-mute', 'icon-unmute'], '' + t.options.classPrefix, '', t.id + '_volume-slider') + ('<a class="' + t.options.classPrefix + 'volume-slider" ') + ('aria-label="' + _i18n2.default.t('mejs.volume-slider') + '" aria-valuemin="0" aria-valuemax="100" role="slider" ') + 'aria-orientation="vertical">' + ('<span class="' + t.options.classPrefix + 'offscreen" id="' + t.id + '_volume-slider">' + volumeControlText + '</span>') + ('<div class="' + t.options.classPrefix + 'volume-total">') + ('<div class="' + t.options.classPrefix + 'volume-current"></div>') + ('<div class="' + t.options.classPrefix + 'volume-handle"></div>') + '</div>' + '</a>' + ('<span class="' + t.options.classPrefix + 'offscreen ' + t.options.classPrefix + 'volume-status" role="status">') + '</span>';
 
 		t.addControlElement(mute, 'volume');
 
@@ -3115,9 +3115,14 @@ Object.assign(_player2.default.prototype, {
 		    mouseIsOver = false,
 		    modified = false,
 		    updateVolumeSlider = function updateVolumeSlider() {
-			var volume = Math.floor(media.volume * 100);
+			const volume = Math.floor(media.volume * 100);
 			volumeSlider.setAttribute('aria-valuenow', volume);
 			volumeSlider.setAttribute('aria-valuetext', volume + '%');
+
+			const statusRegion = mute.querySelector('.' + t.options.classPrefix + 'volume-status');
+			if (statusRegion) {
+				statusRegion.innerHTML = 'Volume ' + volume + '%';
+			}
 		};
 
 		var volumeSlider = mode === 'vertical' ? t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'volume-slider') : t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'horizontal-volume-slider'),
@@ -3228,6 +3233,7 @@ Object.assign(_player2.default.prototype, {
 		mute.addEventListener('focusin', function () {
 			volumeSlider.style.display = 'block';
 			mouseIsOver = true;
+			setTimeout(updateVolumeSlider, 0);
 		});
 
 		mute.addEventListener('focusout', function (e) {