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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <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;
         width: var(--cr-shared-menu-width);
       }
     </style>
     <iron-dropdown id="dropdown" allow-outside-scroll restore-focus-on-close
         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>
 </dom-module>