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

…by screen readers (#5671)

Fixes #5168

src/js/control-bar/time-controls/remaining-time-display.js

@@ -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;
   }
 
   /**

src/js/control-bar/time-controls/time-display.js

@@ -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`,

src/js/utils/fn.js

@@ -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}

src/js/utils/url.js

@@ -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.
  */