Make the repeat button accessible by keyboard.

ui/file_manager/audio_player/elements/repeat_button.css

Index: ui/file_manager/audio_player/elements/repeat_button.css
diff --git a/ui/file_manager/audio_player/elements/repeat_button.css b/ui/file_manager/audio_player/elements/repeat_button.css
index 7003cffacae2cd0edecabfdbab3fbc61276e7d77..82856ae4f6c1c4cfaec35b684bb83daeda37500b 100644
--- a/ui/file_manager/audio_player/elements/repeat_button.css
+++ b/ui/file_manager/audio_player/elements/repeat_button.css
@@ -34,3 +34,9 @@ files-toggle-ripple {
   top: 2px;
   width: 28px;
 }
+
+:host(.keyboard-focus) {
+  /* We use box-shadow rather than outline to make it rounded. */
+  /* TODO(yamaguchi): Share the style config with other buttons in the app. */

[oka, 2016/11/08 06:18:50]

Can't you use files-icon-button to construct repeat-button?

[yamaguchi, 2016/11/08 12:15:39]

I haven't come up with simple solution by that approach. I think that if
repeat-button were to contain files-icon-button, it'd need to tweak some
functions in the files-icon-button object to propagate events upwards. (assuming
that the actual focus should go to the inner icon-button.)

What we are doing here is to make a similar button to files-icon-button but
differs in both its appearance and logic.
So far I got that use of behavior: in Polymer is the way to share logic among
custom elements (like composition in OOP).
https://www.polymer-project.org/1.0/docs/about_10
So I think it'd be better if we can quote out some common code between the two
buttons and reuse it.
Fukino-san would have some more thoughts about the design around these.

+  box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
+}