Fix accessibility issues in AudioPlayer and VideoPlayer.

ui/file_manager/audio_player/elements/control_panel.css

 /* 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. */
 
 /* Controls bar. */
 .controls {
   align-items: center;
   background-color: white;
   display: flex;
   flex-direction: column;
@@ skipping 44 matching lines @@
   width: 100%;
 }
 
 .media-button > div {
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
 }
 
-.media-button[state='default']:not(.disabled) > .default,
-.media-button[state='ended']:not(.disabled) > .ended,
-.media-button[state='playing']:not(.disabled) > .playing,
-.media-button.disabled > .disabled {
-  opacity: 1;
-}
-
 /* Custom sliders for progress and volume. */
 
 /* Customize the standard input[type='range']. */
 
 /* Time controls: a slider and a text time display. */
 
 .time-controls {
   align-items: center;
   display: flex;
   flex-direction: row;
@@ skipping 45 matching lines @@
   justify-content: center;
 }
 
 /* Play/pause button. */
 
 .media-button.toggle input {
   position: absolute;
   visibility: hidden;
 }
 
-.media-button.shuffle-mode > label > .icon {
+.media-button.shuffle-mode {
   background-image: -webkit-image-set(

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

If you set icon as a background image of files-icon-button, icon will go behind
ripple effect. Is this intentional?

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

It is intentional, since it is same as paper-icon-button.
However, it might be better to make it possible to show icon on top of ripple
when we use this element for Files app.
Let me leave it as is for now. I added a TODO comment.

       url(../assets/100/player_button_shuffle.png) 1x,
       url(../assets/200/player_button_shuffle.png) 2x);
   pointer-events: auto;
 }
 
 .media-button.repeat {
   margin-left: 8px;
   margin-right: 0;
 }
 
-.media-button.repeat > label > .icon {
+.media-button.repeat {
   background-image: -webkit-image-set(
       url(../assets/100/player_button_repeat.png) 1x,
       url(../assets/200/player_button_repeat.png) 2x);
   pointer-events: auto;
 }
 
 .media-button.play {
   margin-left: 4px;
   margin-right: 4px;
 }
 
-.media-button.play > .ended {
+.media-button.play {
   background-image: -webkit-image-set(
       url(../assets/100/player_button_play.png) 1x,
       url(../assets/200/player_button_play.png) 2x);
 }
 
-.media-button.play > .playing {
+:host([playing]) .media-button.play {
   background-image: -webkit-image-set(
       url(../assets/100/player_button_pause.png) 1x,
       url(../assets/200/player_button_pause.png) 2x);
 }
 
 .media-button.previous {
+  background-image: -webkit-image-set(
+      url(../assets/100/player_button_previous.png) 1x,
+      url(../assets/200/player_button_previous.png) 2x);
   margin-left: 8px;
   margin-right: 0;
 }
 
-.media-button.previous > .normal {
+.media-button.next {
   background-image: -webkit-image-set(
-      url(../assets/100/player_button_previous.png) 1x,
-      url(../assets/200/player_button_previous.png) 2x);
-}
-
-.media-button.next {
+      url(../assets/100/player_button_next.png) 1x,
+      url(../assets/200/player_button_next.png) 2x);
   margin-left: 0;
   margin-right: 8px;
 }
 
-.media-button.next > .normal {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_next.png) 1x,
-      url(../assets/200/player_button_next.png) 2x);
-}
-
 .media-button.volume {
-  margin-left: 0;
-  margin-right: 8px;
-}
-
-.media-button.volume > .normal {
   background-image: -webkit-image-set(
       url(../assets/100/player_button_volume.png) 1x,
       url(../assets/200/player_button_volume.png) 2x);
-}
-
-.media-button.volume > label > .icon {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_volume.png) 1x,
-      url(../assets/200/player_button_volume.png) 2x);
+  margin-left: 0;
+  margin-right: 8px;
   pointer-events: auto;
 }
 
-.media-button.playlist > label > .icon {
+.media-button.playlist {
   background-image: -webkit-image-set(
       url(../assets/100/player_button_playlist.png) 1x,
       url(../assets/200/player_button_playlist.png) 2x);
   pointer-events: auto;
 }
 
-.media-button files-toggle-ripple {
-  position: absolute;
-  height: 28px;
-  left: 2px;
-  top: 2px;
-  width: 28px;
-  pointer-events: none;
-}
-
-.media-button files-toggle-ripple::shadow .ripple.activated {
-  opacity: 0.1;
-}
-
 /* Invisible div used to compute the width required for the elapsed time. */
 .time-controls > .time > .current {
   align-items: center;
   display: flex;
   flex-direction: row;
   height: 100%;
   justify-content: flex-end;
   position: absolute;
   top: -1px;
 }
 
 .volume-controls {
   align-items: center;
   background-color: rgb(235, 235, 235);
   display: flex;
   flex-direction: row;
 }
 
 .volume-controls paper-slider {
   width: 100%;
 }