Fix accessibility issues in AudioPlayer and VideoPlayer.

ui/file_manager/file_manager/foreground/elements/files_icon_button.html

Index: ui/file_manager/file_manager/foreground/elements/files_icon_button.html
diff --git a/ui/file_manager/file_manager/foreground/elements/files_icon_button.html b/ui/file_manager/file_manager/foreground/elements/files_icon_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..f6113e3dcceb12c4f251508658d12bbf5193043c
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/elements/files_icon_button.html
@@ -0,0 +1,61 @@
+<!-- Copyright 2015 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.
+  -->
+
+<!--
+  `files-icon-button` implements common behaviors among icon buttons in file
+  manager, video player, and audio player.
+  If the button has |toggles| attributes, this element uses files-toggle-ripple
+  to indicate the active state. Otherwise, this element uses files-ripple to
+  show circle burst on click.
+  In addition, this element shows outline only when it is focused by keyboard
+  operation.
+-->
+
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-behaviors/iron-button-state.html">
+<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html">
+<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
+
+<dom-module id="files-icon-button">
+  <template>
+    <style>
+      :host {
+        background-position: center;
+        background-repeat: no-repeat;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-block;
+        height: 32px;
+        outline: none;  /* We use original outline for focused state. */
+        position: relative;
+        width: 32px;
+      }
+
+      :host(.keyboard-focus) {
+        /* We use box-shadow rather than outline to make it rounded. */
+        box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
+      }
+
+      files-toggle-ripple {
+        height: 28px;
+        left: 2px;
+        pointer-events: none;
+        position: absolute;
+        top: 2px;
+        width: 28px;
+      }
+
+      files-toggle-ripple::shadow .ripple.activated {
+        opacity: 0.1;
+      }
+    </style>
+
+    <files-ripple hidden="[[toggles]]"></files-ripple>
+    <files-toggle-ripple activated="[[active]]"></files-toggle-ripple>
+    <!-- TODO(fukino): Make it possible to insert user-defined element to show them on top of ripple effect. -->
+  </template>
+
+  <script src="files_icon_button.js"></script>
+</dom-module>