UI Ally: Make live stream timecode accessible

Closes #1861

Change-Id: I1963d9edf42916bcc3f49dade8e6a436b153d3be

ui/less/buttons.less

@@ -75,6 +75,28 @@
   }
 }
 
+/* This button contains the current time and duration of the video.
+ * It's only clickable when the content is live, and current time is behind live
+ * edge. Otherwise, the button is disabled.
+ */
+.shaka-current-time {
+  font-size: 16px;
+  color: rgb(255, 255, 255);
+
+  /* Make the time element the right size for the text, instead of defaulting
+   * to the same size as the rest of the controls. */
+  height: auto;
+  cursor: pointer;
+
+  &[disabled] {
+    /* Set the background and the color, otherwise it might be overwritten by
+     * the css styles in demo. */
+    background-color: transparent;
+    color: white;
+    cursor: default;
+  }
+}
+
 /* Use a consistent outline focus style across browsers. */
 .shaka-controls-container {
   button:focus,

ui/less/containers.less

@@ -163,14 +163,6 @@
     border: 0;
     cursor: pointer;
   }
-
-  /* Active and disabled buttons will change colors. */
-  button:active {
-    background: rgba(100, 100, 100, 0.4);
-  }
-  button:disabled {
-    color: rgba(255, 255, 255, 0.3);
-  }
 }
 
 /* The container for the giant play button and spinner.  Sits above (Y axis) the

ui/less/other_elements.less

@@ -16,23 +16,6 @@
 
 /* UI elements that did not fit into the buttons/range elements category. */
 
-
-/* This is a div containing the current time and duration of the video.  It sits
- * to the left of the control buttons and above (Y axis) the seek bar.
- * The actual text is inside another div, which is important for click events.
- */
-.shaka-current-time {
-  font-size: 16px;
-  color: rgb(255, 255, 255);
-
-  /* Make the time element the right size for the text, instead of defaulting
-   * to the same size as the rest of the controls. */
-  height: auto;
-
-  cursor: default;
-  .unselectable();
-}
-
 /* This is a spacer element used to separate elements within the control
  * buttons panel. It's just an empty div of certain width. */
 .shaka-spacer {

ui/presentation_time.js

@@ -35,12 +35,11 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
 
-    this.currentTime_ = shaka.util.Dom.createHTMLElement('div');
+    this.currentTime_ = shaka.util.Dom.createHTMLElement('button');
     this.currentTime_.classList.add('shaka-current-time');
     this.currentTime_.textContent = '0:00';
     this.parent.appendChild(this.currentTime_);
 
-    // TODO(#1861): This is not accessible, since it is just a clickable div.
     this.eventManager.listen(this.currentTime_, 'click', () => {
       // Jump to LIVE if the user clicks on the current time.
       if (this.player.isLive()) {
@@ -51,6 +50,10 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     this.eventManager.listen(this.controls, 'timeandseekrangeupdated', () => {
       this.updateTime_();
     });
+
+    this.eventManager.listen(this.player, 'trackschanged', () => {
+      this.onTracksChanged_();
+    });
   }
 
 
@@ -74,16 +77,16 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
       // Consider "LIVE" when less than 1 second behind the live-edge.  Always
       // show the full time string when seeking, including the leading '-';
       // otherwise, the time string "flickers" near the live-edge.
+      // The button should only be clickable when it's live stream content, and
+      // the current play time is behind live edge.
       if ((displayTime >= 1) || isSeeking) {
         this.currentTime_.textContent =
             '- ' + this.buildTimeString_(displayTime, showHour);
-        // TODO: move to CSS
-        this.currentTime_.style.cursor = 'pointer';
+        this.currentTime_.disabled = false;
       } else {
         this.currentTime_.textContent =
           this.localization.resolve(shaka.ui.Locales.Ids.LABEL_LIVE);
-        // TODO: move to CSS
-        this.currentTime_.style.cursor = '';
+        this.currentTime_.disabled = true;
       }
     } else {
       let showHour = duration >= 3600;
@@ -95,8 +98,7 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
         this.currentTime_.textContent += ' / ' +
             this.buildTimeString_(duration, showHour);
       }
-      // TODO: move to CSS
-      this.currentTime_.style.cursor = '';
+      this.currentTime_.disabled = true;
     }
   }
 
@@ -121,6 +123,17 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     }
     return text;
   }
+
+  /**
+   * Set the aria label to be 'Live' when the content is live stream.
+   */
+  onTracksChanged_() {
+    if (this.player.isLive()) {
+      const ariaLabel = shaka.ui.Locales.Ids.ARIA_LABEL_LIVE;
+      this.currentTime_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+          this.localization.resolve(ariaLabel));
+    }
+  }
 };