MD-Settings: A11y - Fix password list focusability.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html b/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
new file mode 100644
index 0000000000000000000000000000000000000000..63248d2eca4f6b2f0eba7a8b6ea05bdca0cf0c5c
--- /dev/null
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
@@ -0,0 +1,63 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../focus_row_behavior.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="passwords_shared_css.html">
+
+<dom-module id="password-list-item">
+  <template>
+    <style include="settings-shared passwords-shared">
+      #password {
+        background-color: transparent;
+        border: none;
+        flex: 1;
+        height: 20px;
+        width: 0;
+      }
+
+      #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;
+      }
+    </style>
+    <div class="list-item" focus-row-container>
+      <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]]"
+            focus-row-control focus-type="originUrl">
+          <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}"
+            focus-row-control focus-type="passwordMenu">
+        </paper-icon-button>
+      </div>
+    </div>
+  </template>
+  <script src="password_list_item.js"></script>
+</dom-module>