Improve keyboard navigation on 'Manage search engines' options page

chrome/browser/resources/options/deletable_item_list.js

 // Copyright (c) 2012 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 */ var List = cr.ui.List;
   /** @const */ var ListItem = cr.ui.ListItem;
 
   /**
    * Creates a deletable list item, which has a button that will trigger a call
@@ skipping 20 matching lines @@
      */
     closeButtonElement_: null,
 
     /**
      * Whether or not this item can be deleted.
      * @type {boolean}
      * @private
      */
     deletable_: true,
 
+    /**
+     * Whether or not the close button can be navigated to using the keyboard.
+     * @type {boolean}
+     * @private
+     */
+    closeButtonFocusable_: false,
+
     /** @override */
     decorate: function() {
       ListItem.prototype.decorate.call(this);
 
       this.classList.add('deletable-item');
 
       this.contentElement_ = /** @type {HTMLElement} */(
           this.ownerDocument.createElement('div'));
       this.appendChild(this.contentElement_);
 
       this.closeButtonElement_ = /** @type {HTMLElement} */(
           this.ownerDocument.createElement('button'));
       this.closeButtonElement_.className =
           'raw-button row-delete-button custom-appearance';
       this.closeButtonElement_.addEventListener('mousedown',
                                                 this.handleMouseDownUpOnClose_);
       this.closeButtonElement_.addEventListener('mouseup',
                                                 this.handleMouseDownUpOnClose_);
       this.closeButtonElement_.addEventListener('focus',
                                                 this.handleFocus_.bind(this));
-      this.closeButtonElement_.tabIndex = -1;
+      this.closeButtonFocusable = false;
       this.closeButtonElement_.title =
           loadTimeData.getString('deletableItemDeleteButtonTitle');
       this.appendChild(this.closeButtonElement_);
     },
 
     /**
      * Returns the element subclasses should add content to.
      * @return {HTMLElement} The element subclasses should popuplate.
      */
     get contentElement() {
@@ skipping 12 matching lines @@
      * 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;
     },
 
+    /* Gets/sets the closeButtonFocusable property. If closeButtonFocusable is
+     * false then the delete button does not participate in the keyboard tab
+     * order.
+     */
+    get closeButtonFocusable() {
+      return this.closeButtonFocusable_;
+    },
+    set closeButtonFocusable(value) {

[Dan Beam, 2014/10/18 01:35:43]

nit:

  if (focusable != this.closeButtonFocusable_)
    return;

[Dan Beam, 2014/10/18 01:35:43]

nit: value => focusable

+      this.closeButtonElement_.tabIndex = value ? 0 : -1;
+      this.closeButtonFocusable_ = value;
+    },
+
     /**
      * Called when a focusable child element receives focus. Selects this item
      * in the list selection model.
      * @private
      */
     handleFocus_: function() {
       // This handler is also fired when the child receives focus as a result of
       // the item getting selected by the customized mouse/keyboard handling in
       // SelectionController. Take care not to destroy a potential multiple
       // selection in this case.
@@ skipping 93 matching lines @@
      */
     deleteItemAtIndex: function(index) {
     },
   };
 
   return {
     DeletableItemList: DeletableItemList,
     DeletableItem: DeletableItem,
   };
 });