fix(remaining-time-display): make the '-' be visual and not readable by screen readers (#5671)

smbea · gkatsev · commit 05513f8d2ba8 · 2019-01-08T15:10:21.000-05:00
Fixes #5168
diff --git a/src/js/control-bar/time-controls/remaining-time-display.js b/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;
   }
 
   /**
diff --git a/src/js/control-bar/time-controls/time-display.js b/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`,
diff --git a/src/js/utils/fn.js b/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}
diff --git a/src/js/utils/url.js b/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.
  */

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ export const bind = function(context, fn, uid) {`
`55`	`55`	`* @param {Function} fn`
`56`	`56`	`* The function to be throttled.`
`57`	`57`	`*`
`58`		`- * @param {Number} wait`
	`58`	`+ * @param {number} wait`
`59`	`59`	`* The number of milliseconds by which to throttle.`
`60`	`60`	`*`
`61`	`61`	`* @return {Function}`
Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ export const getAbsoluteURL = function(url) {`
`126`	`126`	`* @param {string} path`
`127`	`127`	`* The fileName path like '/path/to/file.mp4'`
`128`	`128`	`*`
`129`		`- * @returns {string}`
	`129`	`+ * @return {string}`
`130`	`130`	`* The extension in lower case or an empty string if no`
`131`	`131`	`* extension could be found.`
`132`	`132`	`*/`