Permalink
Browse files

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
  • Loading branch information...
OwenEdwards authored and gkatsev committed Dec 11, 2018
1 parent 8932611 commit 70a71ae81e5026faf38fc0d675521d66847d8411
@@ -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);
@@ -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'
});
}

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

0 comments on commit 70a71ae

Please sign in to comment.