Improve Tab-key navigation for editing Autofill addresses and credit cards.

chrome/browser/resources/options/deletable_item_list.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   const List = cr.ui.List;
   const ListItem = cr.ui.ListItem;
 
   /**
    * Creates a deletable list item, which has a button that will trigger a call
@@ skipping 34 matching lines @@
       this.contentElement_ = this.ownerDocument.createElement('div');
       this.appendChild(this.contentElement_);
 
       this.closeButtonElement_ = this.ownerDocument.createElement('button');
       this.closeButtonElement_.classList.add('raw-button');
       this.closeButtonElement_.classList.add('close-button');
       this.closeButtonElement_.addEventListener('mousedown',
                                                 this.handleMouseDownUpOnClose_);
       this.closeButtonElement_.addEventListener('mouseup',
                                                 this.handleMouseDownUpOnClose_);
+      this.closeButtonElement_.addEventListener('focus',
+                                                this.handleFocus_.bind(this));
       this.appendChild(this.closeButtonElement_);
     },
 
     /**
      * Returns the element subclasses should add content to.
      * @return {HTMLElement} The element subclasses should popuplate.
      */
     get contentElement() {
       return this.contentElement_;
     },
 
     /* Gets/sets the deletable property. An item that is not deletable doesn't
      * show the delete button (although space is still reserved for it).
      */
     get deletable() {
       return this.deletable_;
     },
     set deletable(value) {
       this.deletable_ = value;
       this.closeButtonElement_.disabled = !value;
     },
 
     /**
+     * Called when a focusable child element receives focus. Selects this item
+     * in the list selection model.
+     * @private
+     */
+    handleFocus_: function() {
+      var list = this.parentNode;
+      var index = list.getIndexOfListItem(this);
+      list.selectionModel.selectedIndex = index;
+      list.selectionModel.anchorIndex = index;
+    },
+
+    /**
      * Don't let the list have a crack at the event. We don't want clicking the
      * close button to change the selection of the list.
      * @param {Event} e The mouse down/up event object.
      * @private
      */
     handleMouseDownUpOnClose_: function(e) {
       if (!e.target.disabled)
         e.stopPropagation();
     },
   };
@@ skipping 74 matching lines @@
      */
     deleteItemAtIndex: function(index) {
     },
   };
 
   return {
     DeletableItemList: DeletableItemList,
     DeletableItem: DeletableItem,
   };
 });