MD-Settings: A11y - Fix password list focusability.

chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html

Index: chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
index aa7d3f42683f92e54d7c761de9bb037c12e0dcff..ce94375a526e5d18cc25098784a51ea523ab0267 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
@@ -1,6 +1,5 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
@@ -9,55 +8,16 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
-<link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../global_scroll_target_behavior.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="password_edit_dialog.html">
 <link rel="import" href="passwords_shared_css.html">
+<link rel="import" href="password_list_item.html">
 
 <dom-module id="passwords-section">
   <template>
-    <style include="settings-shared passwords-shared">
-      #password {
-        background-color: transparent;
-        border: none;
-        flex: 1;
-        height: 20px;
-        width: 0;
-      }
-
-      .website-column {
-        display: flex;
-        flex: 3;
-      }
-
-      #originUrl {
-        /* The following non-flex directives allow eliding long originUrls from
-         * the left. Forcing rtl should not cause an issue for right-to-left
-         * languages in this case, since valid URL characters are restricted to
-         * ASCII.
-         */
-         direction: rtl;
-         display: flex;
-      }
-
-      .username-column {
-        -webkit-margin-end: 8px;
-        -webkit-margin-start: 8px;
-        flex: 2;
-      }
-
-      .password-column {
-        align-items: center;
-        display: flex;
-        flex: 2;
-      }
-
-      .selectable {
-        -webkit-user-select: text;
-      }
-    </style>
+    <style include="settings-shared passwords-shared"></style>
     <div class="settings-box first">
       <settings-toggle-button id="passwordToggle" class="start primary-toggle"
           aria-label="$i18n{passwords}" no-extension-indicator
@@ -108,36 +68,10 @@
           class="vertical-list list-with-header"
           scroll-target="[[subpageScrollTarget]]">
         <template>
-          <div class="list-item">
-            <div class="website-column no-min-width"
-                title="[[item.loginPair.urls.link]]">
-              <a id="originUrl" target="_blank" class="selectable no-min-width"
-                  href="[[item.loginPair.urls.link]]">
-                <span class="text-elide">
-                  [[item.loginPair.urls.shown]]
-                </span>
-              </a>
-            </div>
-            <div class="username-column selectable text-elide"
-                id="username">[[item.loginPair.username]]</div>
-            <div class="password-column text-elide">
-              <template is="dom-if" if="[[!item.federationText]]">
-                <!-- Password type and disabled in order to match mock. -->
-                <input id="password" type="password" disabled
-                    value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
-                </input>
-              </template>
-              <template is="dom-if" if="[[item.federationText]]">
-                <span class="selectable text-elide">
-                  [[item.federationText]]
-                </span>
-              </template>
-            </div>
-            <paper-icon-button id="passwordMenu" icon="cr:more-vert"
-                  on-tap="onPasswordMenuTap_" title="$i18n{moreActions}"
-                  tabindex$="[[tabIndex]]">
-            </paper-icon-button>
-          </div>
+          <password-list-item item="[[item]]" tabindex$="[[tabIndex]]"
+              iron-list-tab-index="[[tabIndex]]"
+              last-focused="{{lastFocused_}}">
+          <password-list-item>
         </template>
       </iron-list>
       <div id="noPasswordsLabel" class="list-item"