VideoPlayer: Fix accessibility issues.

ui/file_manager/video_player/js/media_controls.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview MediaControls class implements media playback controls
  * that exist outside of the audio/video HTML element.
  */
 
 /**
@@ skipping 102 matching lines @@
   if (seconds < 10) result += '0';
   result += seconds;
   return result;
 };
 
 /**
  * Create a custom control.
  *
  * @param {string} className Class name.
  * @param {HTMLElement=} opt_parent Parent element or container if undefined.
+ * @param {string=} opt_tagName Tag name of the control. 'div' if undefined.
  * @return {!HTMLElement} The new control element.
  */
-MediaControls.prototype.createControl = function(className, opt_parent) {
+MediaControls.prototype.createControl =
+    function(className, opt_parent, opt_tagName) {
   var parent = opt_parent || this.container_;
-  var control = assertInstanceof(this.document_.createElement('div'),
-      HTMLDivElement);
+  var control = /** @type {!HTMLElement} */
+      (this.document_.createElement(opt_tagName || 'div'));
   control.className = className;
   parent.appendChild(control);
   return control;
 };
 
 /**
  * Create a custom button.
  *
  * @param {string} className Class name.
  * @param {function(Event)=} opt_handler Click handler.
  * @param {HTMLElement=} opt_parent Parent element or container if undefined.
  * @param {number=} opt_numStates Number of states, default: 1.
  * @return {!HTMLElement} The new button element.
  */
 MediaControls.prototype.createButton = function(
     className, opt_handler, opt_parent, opt_numStates) {
   opt_numStates = opt_numStates || 1;
 
-  var button = this.createControl(className, opt_parent);
+  var button = this.createControl(className, opt_parent, 'files-icon-button');
   button.classList.add('media-button');
 
   button.setAttribute('state', MediaControls.ButtonStateType.DEFAULT);
 
   if (opt_handler)
     button.addEventListener('click', opt_handler);
 
   return button;
 };
 
@@ skipping 65 matching lines @@
 MediaControls.prototype.onPlayButtonClicked = function(event) {
   this.togglePlayState();
 };
 
 /**
  * @param {HTMLElement=} opt_parent Parent container.
  */
 MediaControls.prototype.initPlayButton = function(opt_parent) {
   this.playButton_ = this.createButton('play media-control',
       this.onPlayButtonClicked.bind(this), opt_parent, 3 /* States. */);
+  this.playButton_.setAttribute('aria-label',
+      str('MEDIA_PLAYER_PLAY_BUTTON_LABEL'));
 };
 
 /*
  * Time controls
  */
 
 /**
  * The default range of 100 is too coarse for the media progress slider.
  */
 MediaControls.PROGRESS_RANGE = 5000;
 
 /**
  * @param {HTMLElement=} opt_parent Parent container.
  */
 MediaControls.prototype.initTimeControls = function(opt_parent) {
   var timeControls = this.createControl('time-controls', opt_parent);
 
   var timeBox = this.createControl('time media-control', timeControls);
 
   this.currentTimeSpacer_ = this.createControl('spacer', timeBox);
   this.currentTime_ = this.createControl('current', timeBox);
   // Set the initial width to the minimum to reduce the flicker.
   this.updateTimeLabel_(0, 0);
 
   this.progressSlider_ = /** @type {!PaperSliderElement} */ (
       document.createElement('paper-slider'));
   this.progressSlider_.classList.add('progress', 'media-control');
   this.progressSlider_.max = MediaControls.PROGRESS_RANGE;
+  this.progressSlider_.setAttribute('aria-label',
+      str('MEDIA_PLAYER_SEEK_SLIDER_LABEL'));
   this.progressSlider_.addEventListener('change', function(event) {
     this.onProgressChange_(this.progressSlider_.ratio);
   }.bind(this));
   this.progressSlider_.addEventListener(
       'immediate-value-change',
       function(event) {
         this.onProgressDrag_();
       }.bind(this));
   timeControls.appendChild(this.progressSlider_);
 };
@@ skipping 107 matching lines @@
 
 /**
  * @param {HTMLElement=} opt_parent Parent element for the controls.
  */
 MediaControls.prototype.initVolumeControls = function(opt_parent) {
   var volumeControls = this.createControl('volume-controls', opt_parent);
 
   this.soundButton_ = this.createButton('sound media-control',
       this.onSoundButtonClick_.bind(this), volumeControls);
   this.soundButton_.setAttribute('level', 3);  // max level.
+  this.soundButton_.setAttribute('aria-label',
+      str('MEDIA_PLAYER_MUTE_BUTTON_LABEL'));
 
   this.volume_ = /** @type {!PaperSliderElement} */ (
       document.createElement('paper-slider'));
   this.volume_.classList.add('volume', 'media-control');
+  this.volume_.setAttribute('aria-label',
+      str('MEDIA_PLAYER_VOLUME_SLIDER_LABEL'));
   this.volume_.addEventListener('change', function(event) {
     this.onVolumeChange_(this.volume_.ratio);
   }.bind(this));
   this.volume_.addEventListener('immediate-value-change', function(event) {
     this.onVolumeDrag_();
   }.bind(this));
   this.volume_.value = this.volume_.max;
   volumeControls.appendChild(this.volume_);
 };
 
 /**
  * Click handler for the sound level button.
  * @private
  */
 MediaControls.prototype.onSoundButtonClick_ = function() {
   if (this.media_.volume == 0) {
     this.volume_.value = (this.savedVolume_ || 1) * this.volume_.max;
+    this.soundButton_.setAttribute('aria-label',
+        str('MEDIA_PLAYER_MUTE_BUTTON_LABEL'));
   } else {
     this.savedVolume_ = this.media_.volume;
     this.volume_.value = 0;
+    this.soundButton_.setAttribute('aria-label',
+        str('MEDIA_PLAYER_UNMUTE_BUTTON_LABEL'));
   }
   this.onVolumeChange_(this.volume_.ratio);
 };
 
 /**
  * @param {number} value Volume [0..1].
  * @return {number} The rough level [0..3] used to pick an icon.
  * @private
  */
 MediaControls.getVolumeLevel_ = function(value) {
   if (value == 0) return 0;
   if (value <= 1 / 3) return 1;
   if (value <= 2 / 3) return 2;
   return 3;
 };
 
 /**
  * @param {number} value Volume [0..1].
  * @private
  */
 MediaControls.prototype.onVolumeChange_ = function(value) {
   if (!this.media_)
     return;  // Media is detached.
 
   this.media_.volume = value;
   this.soundButton_.setAttribute('level', MediaControls.getVolumeLevel_(value));
+  this.soundButton_.setAttribute('aria-label',
+      value === 0 ? str('MEDIA_PLAYER_UNMUTE_BUTTON_LABEL')
+                  : str('MEDIA_PLAYER_MUTE_BUTTON_LABEL'));
 };
 
 /**
  * @private
  */
 MediaControls.prototype.onVolumeDrag_ = function() {
   if (this.media_.volume !== 0) {
     this.savedVolume_ = this.media_.volume;
   }
 };
@@ skipping 134 matching lines @@
 /**
  * Updates the play button state.
  * @param {boolean} playing If the video is playing.
  * @private
  */
 MediaControls.prototype.updatePlayButtonState_ = function(playing) {
   if (this.media_.ended &&
       this.progressSlider_.value === this.progressSlider_.max) {
     this.playButton_.setAttribute('state',
                                   MediaControls.ButtonStateType.ENDED);
+    this.playButton_.setAttribute('aria-label',
+        str('MEDIA_PLAYER_PLAY_BUTTON_LABEL'));
   } else if (playing) {
     this.playButton_.setAttribute('state',
                                   MediaControls.ButtonStateType.PLAYING);
+    this.playButton_.setAttribute('aria-label',
+        str('MEDIA_PLAYER_PAUSE_BUTTON_LABEL'));
   } else {
     this.playButton_.setAttribute('state',
                                   MediaControls.ButtonStateType.DEFAULT);
+    this.playButton_.setAttribute('aria-label',
+        str('MEDIA_PLAYER_PLAY_BUTTON_LABEL'));
   }
 };
 
 /**
  * Restore play state. Base implementation is empty.
  */
 MediaControls.prototype.restorePlayState = function() {};
 
 /**
  * Encode current state into the page URL or the app state.
@@ skipping 34 matching lines @@
     delete window.appState.time;
   util.saveAppState();
   return;
 };
 
 /**
  * Create video controls.
  *
  * @param {!HTMLElement} containerElement The container for the controls.
  * @param {function(Event)} onMediaError Function to display an error message.
- * @param {function(string):string} stringFunction Function providing localized
- *     strings.
  * @param {function(Event)=} opt_fullScreenToggle Function to toggle fullscreen
  *     mode.
  * @param {HTMLElement=} opt_stateIconParent The parent for the icon that
  *     gives visual feedback when the playback state changes.
  * @constructor
  * @struct
  * @extends {MediaControls}
  */
-function VideoControls(containerElement, onMediaError, stringFunction,
-    opt_fullScreenToggle, opt_stateIconParent) {
+function VideoControls(
+    containerElement, onMediaError, opt_fullScreenToggle, opt_stateIconParent) {
   MediaControls.call(this, containerElement, onMediaError);
-  this.stringFunction_ = stringFunction;
 
   this.container_.classList.add('video-controls');
   this.initPlayButton();
   this.initTimeControls();
   this.initVolumeControls();
 
   // Create the cast button.
-  this.castButton_ = this.createButton('cast menubutton');
+  // We need to use <button> since cr.ui.MenuButton.decorate modifies prototype
+  // chain, by which <files-icon-button> will not work correctly.
+  // TODO(fukino): Find a way to use files-icon-button consistently.
+  this.castButton_ = this.createControl(
+      'cast media-button', undefined, 'button');
   this.castButton_.setAttribute('menu', '#cast-menu');
-  this.castButton_.setAttribute(
-      'label', this.stringFunction_('VIDEO_PLAYER_PLAY_ON'));
+  this.castButton_.setAttribute('aria-label', str('VIDEO_PLAYER_PLAY_ON'));
+  this.castButton_.setAttribute('state', MediaControls.ButtonStateType.DEFAULT);
+  this.castButton_.appendChild(document.createElement('files-ripple'));
   cr.ui.decorate(this.castButton_, cr.ui.MenuButton);
 
   if (opt_fullScreenToggle) {
     this.fullscreenButton_ =
         this.createButton('fullscreen', opt_fullScreenToggle);
+    this.fullscreenButton_.setAttribute('aria-label',
+        str('VIDEO_PLAYER_FULL_SCREEN_BUTTON_LABEL'));
   }
 
   if (opt_stateIconParent) {
     this.stateIcon_ = this.createControl(
         'playback-state-icon', opt_stateIconParent);
     this.textBanner_ = this.createControl('text-banner', opt_stateIconParent);
   }
 
   // Disables all controls at first.
   this.enableControls_(false);
@@ skipping 45 matching lines @@
 };
 
 /**
  * Shows a text banner.
  *
  * @param {string} identifier String identifier.
  * @private
  */
 VideoControls.prototype.showTextBanner_ = function(identifier) {
   this.textBanner_.removeAttribute('visible');
-  this.textBanner_.textContent = this.stringFunction_(identifier);
+  this.textBanner_.textContent = str(identifier);
 
   setTimeout(function() {
     var onAnimationEnd = function(event) {
       this.textBanner_.removeEventListener(
           'webkitAnimationEnd', onAnimationEnd);
       this.textBanner_.removeAttribute('visible');
     }.bind(this);
     this.textBanner_.addEventListener('webkitAnimationEnd', onAnimationEnd);
 
     this.textBanner_.setAttribute('visible', 'true');
@@ skipping 124 matching lines @@
   var hideBelow = function(selector, limit) {
     this.container_.querySelector(selector).style.display =
         width < limit ? 'none' : '-webkit-box';
   }.bind(this);
 
   hideBelow('.time', 350);
   hideBelow('.volume', 275);
   hideBelow('.volume-controls', 210);
   hideBelow('.fullscreen', 150);
 };
+
+/**
+ * Updates video control when the window is fullscreened or restored.
+ * @param {boolean} fullscreen True if the window gets fullscreened.
+ */
+VideoControls.prototype.onFullScreenChanged = function(fullscreen) {
+  if (fullscreen) {
+    this.container_.setAttribute('fullscreen', '');
+  } else {
+    this.container_.removeAttribute('fullscreen');
+  }
+
+  if (this.fullscreenButton_) {
+    this.fullscreenButton_.setAttribute('aria-label',
+        fullscreen ? str('VIDEO_PLAYER_EXIT_FULL_SCREEN_BUTTON_LABEL')
+                   : str('VIDEO_PLAYER_FULL_SCREEN_BUTTON_LABEL'));;
+  }
+};