fix(a11y): fix hidden Control Text in Progress bar (Fixes #5251) (#5655)

- Update the Control Text in the load-progress-bar during loading, remove unnecessary Control Text from the play-progress-bar, and hide the time-tooltip feature from Assistive Technology using ARIA.
- Add a span around the vjs-control-text-loaded-percentage in load-progress-bar, and use that for the text to update.
- Hide the time-tooltip feature from Assistive Technology using ARIA

Fixes #5251

src/js/control-bar/progress-control/load-progress-bar.js

@@ -35,7 +35,7 @@ class LoadProgressBar extends Component {
   createEl() {
     return super.createEl('div', {
       className: 'vjs-load-progress',
-      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
+      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: <span class="vjs-control-text-loaded-percentage">0%</span></span>`
     });
   }
 
@@ -59,18 +59,28 @@ class LoadProgressBar extends Component {
     const duration = liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration();
     const bufferedEnd = this.player_.bufferedEnd();
     const children = this.partEls_;
+    const controlTextPercentage = this.$('.vjs-control-text-loaded-percentage');
 
     // get the percent width of a time compared to the total end
-    const percentify = function(time, end) {
+    const percentify = function(time, end, rounded) {
       // no NaN
-      const percent = (time / end) || 0;
+      let percent = (time / end) || 0;
 
-      return ((percent >= 1 ? 1 : percent) * 100) + '%';
+      percent = (percent >= 1 ? 1 : percent) * 100;
+
+      if (rounded) {
+        percent = percent.toFixed(2);
+      }
+
+      return percent + '%';
     };
 
     // update the width of the progress bar
     this.el_.style.width = percentify(bufferedEnd, duration);
 
+    // update the control-text
+    Dom.textContent(controlTextPercentage, percentify(bufferedEnd, duration, true));
+
     // add child elements to represent the individual buffered time ranges
     for (let i = 0; i < buffered.length; i++) {
       const start = buffered.start(i);

src/js/control-bar/progress-control/play-progress-bar.js

@@ -22,8 +22,9 @@ class PlayProgressBar extends Component {
    */
   createEl() {
     return super.createEl('div', {
-      className: 'vjs-play-progress vjs-slider-bar',
-      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Progress')}</span>: 0%</span>`
+      className: 'vjs-play-progress vjs-slider-bar'
+    }, {
+      'aria-hidden': 'true'
     });
   }
 

src/js/control-bar/progress-control/time-tooltip.js

@@ -21,6 +21,8 @@ class TimeTooltip extends Component {
   createEl() {
     return super.createEl('div', {
       className: 'vjs-time-tooltip'
+    }, {
+      'aria-hidden': 'true'
     });
   }