Permalink
Browse files

fix(remaining-time-display): make the '-' be visual and not readable …

…by screen readers (#5671)

Fixes #5168
  • Loading branch information...
smbea authored and gkatsev committed Jan 4, 2019
1 parent 3d093ed commit 05513f8d2ba8b69db240e97f5cd20e343e8a8f16
@@ -3,6 +3,8 @@
*/
import TimeDisplay from './time-display';
import Component from '../../component.js';
import * as Dom from '../../utils/dom.js';

/**
* Displays the time left in the video
*
@@ -36,19 +38,16 @@ class RemainingTimeDisplay extends TimeDisplay {
}

/**
* The remaining time display prefixes numbers with a "minus" character.
*
* @param {number} time
* A numeric time, in seconds.
* Create the `Component`'s DOM element with the "minus" characted prepend to the time
*
* @return {string}
* A formatted time
*
* @private
* @return {Element}
* The element that was created.
*/
formatTime_(time) {
// TODO: The "-" should be decorative, and not announced by a screen reader
return '-' + super.formatTime_(time);
createEl() {
const el = super.createEl();

el.insertBefore(Dom.createEl('span', {}, {'aria-hidden': true}, '-'), this.contentEl_);
return el;
}

/**
@@ -35,7 +35,7 @@ class TimeDisplay extends Component {
* @return {Element}
* The element that was created.
*/
createEl(plainName) {
createEl() {
const className = this.buildCSSClass();
const el = super.createEl('div', {
className: `${className} vjs-time-control vjs-control`,
@@ -55,7 +55,7 @@ export const bind = function(context, fn, uid) {
* @param {Function} fn
* The function to be throttled.
*
* @param {Number} wait
* @param {number} wait
* The number of milliseconds by which to throttle.
*
* @return {Function}
@@ -126,7 +126,7 @@ export const getAbsoluteURL = function(url) {
* @param {string} path
* The fileName path like '/path/to/file.mp4'
*
* @returns {string}
* @return {string}
* The extension in lower case or an empty string if no
* extension could be found.
*/

0 comments on commit 05513f8

Please sign in to comment.