Fix accessibility issues in AudioPlayer and VideoPlayer.

ui/file_manager/audio_player/elements/control_panel.css

Index: ui/file_manager/audio_player/elements/control_panel.css
diff --git a/ui/file_manager/audio_player/elements/control_panel.css b/ui/file_manager/audio_player/elements/control_panel.css
index 9a2b1989493935343391ffd999caad797acfdb97..de868107107a9ad14109e04b411ea0d25008b4c2 100644
--- a/ui/file_manager/audio_player/elements/control_panel.css
+++ b/ui/file_manager/audio_player/elements/control_panel.css
@@ -62,13 +62,6 @@
   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']. */
@@ -134,7 +127,7 @@ paper-slider.disabled {
   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);
@@ -146,7 +139,7 @@ paper-slider.disabled {
   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);
@@ -158,78 +151,50 @@ paper-slider.disabled {
   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 {
-  margin-left: 8px;
-  margin-right: 0;
-}
-
-.media-button.previous > .normal {
   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.next {
-  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 {
+.media-button.volume {
   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;