MD WebUI: Use arrow keys for navigation in cr-shared-menu, close on tab

ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html

Index: ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
diff --git a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
index 6522f7291bf8c115db458112719d04dc7d8a4161..56f8039eda1af4b30b026e100c15e9b13d197ab2 100644
--- a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
+++ b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.html
@@ -6,17 +6,16 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button-animations.html">
 
 <dom-module id="cr-shared-menu">
   <template>
     <style>
-      #menu {
+      paper-listbox {
         @apply(--shadow-elevation-2dp);
-        background-color: white;
         overflow: hidden;
-        padding: 8px 0;
         position: relative;
       }
     </style>
@@ -24,9 +23,9 @@
         vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}"
         open-animation-config="[[openAnimationConfig]]"
         close-animation-config="[[closeAnimationConfig]]">
-      <div id="menu" class="dropdown-content" role="menu">
+      <paper-listbox id="menu" class="dropdown-content">
         <content></content>
-      </div>
+      </paper-listbox>
     </iron-dropdown>
   </template>
   <script src="cr_shared_menu.js"></script>