Fix accessibility issues in AudioPlayer and VideoPlayer.

ui/file_manager/audio_player/elements/control_panel.js

 // Copyright 2014 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.
 
 (function() {
   'use strict';
 
   Polymer({
     is: 'control-panel',
 
     properties: {
       /**
        * Flag whether the audio is playing or paused. True if playing, or false
        * paused.
        */
       playing: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
+        reflectToAttribute: true,
+        observer: 'playingChanged_'
       },
 
       /**
        * Current elapsed time in the current music in millisecond.
        */
       time: {
         type: Number,
         value: 0,
         notify: true
       },
@@ skipping 51 matching lines @@
         reflectToAttribute: true
       },
 
       /**
        * Whether the knob of time slider is being dragged.
        */
       dragging: {
         type: Boolean,
         value: false,
         notify: true
+      },
+
+      /**
+       * Dictionary which contains aria-labels for each controls.
+       */
+      ariaLabels: {
+        type: Object,
+        observer: 'ariaLabelsChanged_'
       }
     },
 
     /**
      * Initializes an element. This method is called automatically when the
      * element is ready.
      */
     ready: function() {
       this.$.timeSlider.addEventListener('value-change', function() {
         if (this.dragging)
@@ skipping 39 matching lines @@
      * Converts the time and duration into human friendly string.
      * @param {number} time Time to be converted.
      * @param {number} duration Duration to be converted.
      * @return {string} String representation of the given time
      */
     computeTimeString_: function(time, duration) {
       return this.time2string_(time) + ' / ' + this.time2string_(duration);
     },
 
     /**
-     * Computes state for play button based on 'playing' property.
-     * @return {string}
+     * Invoked when the playing property is changed.
+     * @param {boolean} playing
+     * @private
      */
-    computePlayState_: function(playing) {
-      return playing ? "playing" : "ended";
+    playingChanged_: function(playing) {
+      if (this.ariaLabels) {
+        this.$.play.setAttribute('aria-label',
+            playing ? this.ariaLabels.pause : this.ariaLabels.play);
+      }
     },
 
     /**
-     * Computes style for '.filled' element of progress bar.
-     * @return {string}
+     * Invoked when the ariaLabels property is changed.
+     * @param {Object} ariaLabels
+     * @private
      */
-    computeProgressBarStyle_: function(time, duration) {
-      return 'width: ' + (time / duration * 100) + '%;';
+    ariaLabelsChanged_: function(ariaLabels) {

[yawano, 2015/11/06 05:38:37]

small nit: assert(ariaLabels)?

[fukino, 2015/11/06 10:13:21]

Done.

+      // TODO(fukino): Use data bindings.
+      this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);

[yawano, 2015/11/06 05:38:37]

Is it difficult to use i18nTemplate here as we do in File Manager and Gallery? -
https://code.google.com/p/chromium/codesearch#chromium/src/ui/file_manager/ga...

Using i18n-values properties seem cleaner for me.

[fukino, 2015/11/06 10:13:21]

I pass translated labels to the custom element because I don't want to make the
element dependent with VideoPlayer or cr.ui library.

+      this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle);
+      this.$.repeat.setAttribute('aria-label', ariaLabels.repeat);
+      this.$.previous.setAttribute('aria-label', ariaLabels.previous);
+      this.$.play.setAttribute('aria-label',
+          this.playing ? ariaLabels.pause : ariaLabels.play);
+      this.$.next.setAttribute('aria-label', ariaLabels.next);
+      this.$.volume.setAttribute('aria-label', ariaLabels.volume);
+      this.$.playList.setAttribute('aria-label', ariaLabels.playList);
+      this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider);
     }
   });
 })();  // Anonymous closure