Make MD Settings side bar keyboard accessible.

chrome/browser/resources/settings/settings_menu/settings_menu.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-menu">
   <template>
     <style include="settings-shared">
       #about-menu[about-selected] {
         color: var(--google-blue-700);
       }
 
       iron-icon {
         --iron-icon-fill-color: var(--settings-nav-grey);
         -webkit-margin-end: 24px;
       }
 
+      .menu-trigger > iron-icon {
+        -webkit-margin-end: 22px;  /* 24px - 2px from margin for outline. */
+      }
+
+      paper-button span {
+        -webkit-margin-end: 16px;
+        flex: 1;
+      }
+
       .iron-selected:not(.menu-trigger) > iron-icon {
         fill: var(--google-blue-700);
       }
 
-      .menu-trigger span {
-        -webkit-margin-end: 16px;
-        flex: 1;
+      paper-menu {
+        padding: 0;
       }
 
-      paper-menu {
-        --paper-menu-selected-item: {
+      paper-button {
+        @apply(--settings-actionable);
+        --paper-menu-focused-item: {
+          outline: auto 5px -webkit-focus-ring-color;
+        };
+        --paper-button-flat-keyboard-focus: {
+          background: none;
           font-weight: 500;
         };
         --paper-menu-focused-item-after: {
           background: none;
         };
+        --paper-menu-selected-item: {
+          color: var(--settings-nav-grey);
+          font-weight: 500;
+        };
+        -webkit-margin-end: 2px;  /* Margin so selected outline is visible. */
+        -webkit-margin-start: 1px;
         color: var(--settings-nav-grey);
-        font-size: 100%;
+        display: flex;
         padding: 0;
       }
 
-      div[data-path] {
-        @apply(--settings-actionable);
-      }
-
       #basicPage {
         margin-top: 8px;
       }
 
-      .page-menu > div {
+      .page-menu > paper-button {
+        -webkit-padding-end: 0;
         margin-top: 8px;
       }
 
-      .page-menu {
-        --paper-menu-selected-item: {
-          font-weight: 500;
-        };
-      }
-
-      paper-menu div {
-        position: relative;  /* Needed for paper-ripple. */
-      }
-
-      paper-ripple {
-        color: var(--google-blue-700);
-        opacity: .5;
-      }
-
       .page-menu paper-menu {
         --paper-menu-selected-item: {
           color: var(--google-blue-700);
           font-weight: 500;
         };
       }
 
-      .page-menu div {
-        -webkit-padding-start: 24px;
-        align-items: center;
-        display: flex;
+      .page-menu paper-button {
+        -webkit-padding-start: 23px;  /* 24px - 1px from margin for outline. */
         font-size: 100%;
         font-weight: 500;
         min-height: 40px;
+        text-transform: none;
         word-break: break-word;
       }
 
-      .page-menu div iron-icon {
-        flex-shrink: 0;
-      }
-
       .separator {
         /* Per Alan@, this line is different from the other separator lines. */
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
         margin-top: 8px;
       }
     </style>
-    <paper-menu name="root-menu">
-      <div class="page-menu" id="basicPage">
-        <paper-menu attr-for-selected="data-path" class="menu-content"
-            id="basicMenu" selected="[[currentRoute.path]]">
+    <div class="page-menu" id="basicPage">
+      <paper-menu attr-for-selected="data-path" class="menu-content"
+          id="basicMenu" selected="[[currentRoute.path]]">
 <if expr="chromeos">
-          <div data-path="/internet" on-tap="openPage_">
-            <iron-icon icon="settings:network-wifi"></iron-icon>
-            $i18n{internetPageTitle}
-          </div>
+        <paper-button data-path="/internet" on-tap="openPage_">

[dschuyler, 2017/01/27 00:25:28]

How much of a performance difference is there from changing these from div to
paper-button?

[hcarmona, 2017/01/27 22:54:51]

Ok, ran Tommy's testing and change is negligible average load time went from
1173ms to 1181ms. (20 runs each)

This entire section is behind a dom-if, so 'no change' makes sense.

Are there other tests that I should run?

[hcarmona, 2017/01/30 19:01:43]

Tested on my beefy dev machine and without change stamping is ~17ms. With change
stamping is ~32ms. This is also consistent on my macbook.

[hcarmona, 2017/02/01 00:39:48]

Changed to action-link and removed ripple after our conversation. Stamp time is
now ~17 seconds.

+          <iron-icon icon="settings:network-wifi"></iron-icon>
+          <span>$i18n{internetPageTitle}</span>
+        </paper-button>
 </if>
-          <div id="people" data-path="/people" on-tap="openPage_"
-              hidden="[[!pageVisibility.people]]">
-            <iron-icon icon="settings:people"></iron-icon>
-            $i18n{peoplePageTitle}
-          </div>
-          <div data-path="/appearance" on-tap="openPage_"
-              hidden="[[!pageVisibility.appearance]]">
-            <iron-icon icon="settings:palette"></iron-icon>
-            $i18n{appearancePageTitle}
-          </div>
+        <paper-button id="people" data-path="/people" on-tap="openPage_"
+            hidden="[[!pageVisibility.people]]">
+          <iron-icon icon="settings:people"></iron-icon>
+          <span>$i18n{peoplePageTitle}</span>
+        </paper-button>
+        <paper-button data-path="/appearance" on-tap="openPage_"
+            hidden="[[!pageVisibility.appearance]]">
+          <iron-icon icon="settings:palette"></iron-icon>
+          <span>$i18n{appearancePageTitle}</span>
+        </paper-button>
 <if expr="chromeos">
-          <div data-path="/device" on-tap="openPage_">
-            <iron-icon icon="settings:laptop-chromebook"></iron-icon>
-            $i18n{devicePageTitle}
-          </div>
+        <paper-button data-path="/device" on-tap="openPage_">
+          <iron-icon icon="settings:laptop-chromebook"></iron-icon>
+          <span>$i18n{devicePageTitle}</span>
+        </paper-button>
 </if>
-          <div data-path="/search" on-tap="openPage_">
-            <iron-icon icon="cr:search"></iron-icon>
-            $i18n{searchPageTitle}
-          </div>
+        <paper-button data-path="/search" on-tap="openPage_">
+          <iron-icon icon="cr:search"></iron-icon>
+          <span>$i18n{searchPageTitle}</span>
+        </paper-button>
 <if expr="chromeos">
-           <div data-path="/androidApps" on-tap="openPage_"
-               hidden="[[!showAndroidApps]]">
-             <iron-icon icon="settings:android"></iron-icon>
-             $i18n{androidAppsPageTitle}
-           </div>
+         <paper-button data-path="/androidApps" on-tap="openPage_"
+             hidden="[[!showAndroidApps]]">
+           <iron-icon icon="settings:android"></iron-icon>
+           <span>$i18n{androidAppsPageTitle}</span>
+         </paper-button>
 </if>
 <if expr="not chromeos">
-          <div data-path="/defaultBrowser" on-tap="openPage_"
-              hidden="[[!pageVisibility.defaultBrowser]]">
-            <iron-icon icon="settings:web"></iron-icon>
-            $i18n{defaultBrowser}
-          </div>
+        <paper-button data-path="/defaultBrowser" on-tap="openPage_"
+            hidden="[[!pageVisibility.defaultBrowser]]">
+          <iron-icon icon="settings:web"></iron-icon>
+          <span>$i18n{defaultBrowser}</span>
+        </paper-button>
 </if>
-          <div data-path="/onStartup" on-tap="openPage_"
-              hidden="[[!pageVisibility.onStartup]]">
-            <iron-icon icon="settings:power-settings-new"></iron-icon>
-            $i18n{onStartup}
-          </div>
-        </paper-menu>
-      </div>
+        <paper-button data-path="/onStartup" on-tap="openPage_"
+            hidden="[[!pageVisibility.onStartup]]">
+          <iron-icon icon="settings:power-settings-new"></iron-icon>
+          <span>$i18n{onStartup}</span>
+        </paper-button>
+      </paper-menu>
       <paper-submenu class="page-menu" id="advancedSubmenu" actionable
           opened="{{advancedOpened}}"
           hidden="[[!pageVisibility.advancedSettings]]">
-        <div class="menu-trigger">
+        <paper-button class="menu-trigger" tabindex="0">
           <span>$i18n{advancedPageTitle}</span>
           <iron-icon icon="[[arrowState_(advancedOpened)]]"></iron-icon>
-          <paper-ripple></paper-ripple>
-        </div>
+        </paper-button>
         <paper-menu attr-for-selected="data-path" class="menu-content"
             id="advancedMenu" selected="[[currentRoute.path]]">
 <if expr="chromeos">
-          <div data-path="/dateTime" on-tap="openPage_">
+          <paper-button data-path="/dateTime" on-tap="openPage_">
             <iron-icon icon="settings:access-time"></iron-icon>
-            $i18n{dateTimePageTitle}
-          </div>
+            <span>$i18n{dateTimePageTitle}</span>
+          </paper-button>
 </if>
-          <div data-path="/privacy" on-tap="openPage_">
+          <paper-button data-path="/privacy" on-tap="openPage_">
             <iron-icon icon="settings:security"></iron-icon>
-            $i18n{privacyPageTitle}
-          </div>
+            <span>$i18n{privacyPageTitle}</span>
+          </paper-button>
 <if expr="chromeos">
-          <div data-path="/bluetooth" on-tap="openPage_">
+          <paper-button data-path="/bluetooth" on-tap="openPage_">
             <iron-icon icon="settings:bluetooth"></iron-icon>
-            $i18n{bluetoothPageTitle}
-          </div>
+            <span>$i18n{bluetoothPageTitle}</span>
+          </paper-button>
 </if>
-          <div data-path="/passwordsAndForms" on-tap="openPage_"
+          <paper-button data-path="/passwordsAndForms" on-tap="openPage_"
               hidden="[[!pageVisibility.passwordsAndForms]]">
             <iron-icon icon="settings:assignment"></iron-icon>
-            $i18n{passwordsAndAutofillPageTitle}
-          </div>
-          <div data-path="/languages" on-tap="openPage_">
+            <span>$i18n{passwordsAndAutofillPageTitle}</span>
+          </paper-button>
+          <paper-button data-path="/languages" on-tap="openPage_">
             <iron-icon icon="settings:language"></iron-icon>
-            $i18n{languagesPageTitle}
-          </div>
-          <div data-path="/downloads" on-tap="openPage_">
+            <span>$i18n{languagesPageTitle}</span>
+          </paper-button>
+          <paper-button data-path="/downloads" on-tap="openPage_">
             <iron-icon icon="cr:file-download"></iron-icon>
-            $i18n{downloadsPageTitle}
-          </div>
-          <div data-path="/printing" on-tap="openPage_">
+            <span>$i18n{downloadsPageTitle}</span>
+          </paper-button>
+          <paper-button data-path="/printing" on-tap="openPage_">
             <iron-icon icon="cr:print"></iron-icon>
-            $i18n{printingPageTitle}
-          </div>
-          <div data-path="/accessibility" on-tap="openPage_">
+            <span>$i18n{printingPageTitle}</span>
+          </paper-button>
+          <paper-button data-path="/accessibility" on-tap="openPage_">
             <iron-icon icon="settings:accessibility"></iron-icon>
-            $i18n{a11yPageTitle}
-          </div>
+            <span>$i18n{a11yPageTitle}</span>
+          </paper-button>
 <if expr="not chromeos">
-          <div data-path="/system" on-tap="openPage_">
+          <paper-button data-path="/system" on-tap="openPage_">
             <iron-icon icon="settings:build"></iron-icon>
-            $i18n{systemPageTitle}
-          </div>
+            <span>$i18n{systemPageTitle}</span>
+          </paper-button>
 </if>
-          <div data-path="/reset" on-tap="openPage_"
+          <paper-button data-path="/reset" on-tap="openPage_"
               hidden="[[!pageVisibility.reset]]">
             <iron-icon icon="settings:restore"></iron-icon>
-            $i18n{resetPageTitle}
-          </div>
+            <span>$i18n{resetPageTitle}</span>
+          </paper-button>
         </paper-menu>
       </paper-submenu>
-      <div class="separator"></div>
-      <paper-submenu class="page-menu">
-        <div about-selected$="[[aboutSelected_]]" class="menu-trigger"
-            id="about-menu" on-tap="openPage_" data-path="/help">
-          $i18n{aboutPageTitle}
-        </div>
-      </paper-submenu>
+    </div>
+    <div class="separator"></div>
+    <paper-menu class="page-menu">
+      <paper-button about-selected$="[[aboutSelected_]]"
+          id="about-menu" on-tap="openPage_" data-path="/help">
+        <span>$i18n{aboutPageTitle}</span>
+      </paper-button>
     </paper-menu>
   </template>
   <script src="settings_menu.js"></script>
 </dom-module>