Makes the network dropdown keyboard accessible (focus friendly).

chrome/browser/resources/chromeos/login/oobe_screen_network.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.
 
 /**
  * @fileoverview Oobe network screen implementation.
  */
 
 cr.define('oobe', function() {
   /**
+   * Creates a new container for the drop down menu items.
+   * @constructor
+   * @extends{HTMLDivElement}
+   */
+  var DropDownContainer  = cr.ui.define('div');
+
+  DropDownContainer.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.classList.add('dropdown-container');
+      // Selected item in the menu list.
+      this.selectedItem = null;
+      // First item which could be selected.
+      this.firstItem = null;
+    },
+
+    /**
+     * Selects new item.
+     * @param {!Object} selectedItem Item to be selected.
+     */
+    selectItem: function(selectedItem) {
+      if (this.selectedItem)
+        this.selectedItem.classList.remove('hover');
+      selectedItem.classList.add('hover');
+      this.selectedItem = selectedItem;
+    }
+  };
+
+  /**
    * Creates a new DropDown div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var DropDown = cr.ui.define('div');
 
   DropDown.ITEM_DIVIDER_ID = -2;
 
   DropDown.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
+      this.appendChild(this.createOverlay_());
       this.appendChild(this.createTitle_());
 
       // Create menu items container.
-      var container = this.ownerDocument.createElement('div')
-      container.classList.add('dropdown-container');
+      var container = this.ownerDocument.createElement('div');
+      DropDownContainer.decorate(container);

[xiyuan, 2011/08/09 16:43:39]

nit: think you could combine line 59-60 like this:
var container = new DropDownContainer();

[altimofeev, 2011/08/09 17:17:30]

Done.

       this.appendChild(container);
+
       this.isShown = false;
+      this.addEventListener('keydown', this.keyDownHandler_);
     },
 
     /**
      * Returns true if dropdown menu is shown.
      * @type {bool} Whether menu element is shown.
      */
     get isShown() {
-      return !this.lastElementChild.hidden;
+      return !this.container.hidden;
     },
 
     /**
      * Sets dropdown menu visibility.
      * @param {bool} show New visibility state for dropdown menu.
      */
     set isShown(show) {
-      this.lastElementChild.hidden = !show;
+      this.firstElementChild.hidden = !show;
+      this.container.hidden = !show;
+      if (show)
+        this.container.selectItem(this.container.firstItem);
     },
 
     /**
+     * Returns title button.
+     */
+    get titleButton() {
+      return this.childNodes[1];
+    },
+
+    /**
+     * Returns container of the menu items.
+     */
+    get container() {
+      return this.lastElementChild;
+    },
+
+    /**
      * Sets title and icon.
      * @param {string} title Text on dropdown.
      * @param {string} icon Icon in dataURL format.
      */
     setTitle: function(title, icon) {
       // TODO(nkostylev): Icon support for dropdown title.
-      this.firstElementChild.textContent = title;
+      this.titleButton.textContent = title;
     },
 
     /**
      * Sets dropdown items.
      * @param {Array} items Dropdown items array.
      */
     setItems: function(items) {
-      var container = this.lastElementChild;
-      container.innerHTML = '';
+      this.container.innerHTML = '';
+      this.container.firstItem = null;
+      this.container.selectedItem = null;
       for (var i = 0; i < items.length; ++i) {
         var item = items[i];
         if ('sub' in item) {
           // Workaround for submenus, add items on top level.
           // TODO(altimofeev): support submenus.
           for (var j = 0; j < item.sub.length; ++j)
-            this.createItem_(container, item.sub[j]);
+            this.createItem_(this.container, item.sub[j]);
           continue;
         }
-        this.createItem_(container, item);
+        this.createItem_(this.container, item);
       }
+      this.container.selectItem(this.container.firstItem);
     },
 
     /**
      * Creates dropdown item element and adds into container.
      * @param {HTMLElement} container Container where item is added.
      * @param {!Object} item Item to be added.
      * @private
      */
     createItem_ : function(container, item) {
       var itemContentElement;
@@ skipping 26 matching lines @@
         wrapperDiv.classList.add('dropdown-item-container');
         var imageDiv = this.ownerDocument.createElement('div');
         imageDiv.classList.add('dropdown-image');
         imageDiv.appendChild(image);
         wrapperDiv.appendChild(imageDiv);
         wrapperDiv.appendChild(itemElement);
         wrapperDiv.addEventListener('click', function f(e) {
           var item = this.lastElementChild;
           if (item.iid < -1 || item.classList.contains('disabled-item'))
             return;
-          item.controller.isShown = !item.controller.isShown;
+          item.controller.isShown = false;
           if (item.iid >= 0)
             chrome.send('networkItemChosen', [item.iid]);
         });
+        wrapperDiv.addEventListener('mouseover', function f(e) {
+          this.parentNode.selectItem(this);
+        });
         itemElement = wrapperDiv;
       }
       container.appendChild(itemElement);
+      if (!container.firstItem && item.id >= 0) {
+        container.firstItem = itemElement;
+      }
     },
 
     /**
+     * Creates dropdown overlay element, which catches outside clicks.
+     * @type {HTMLElement}
+     * @private
+     */
+    createOverlay_: function() {
+      var overlay = this.ownerDocument.createElement('div');
+      overlay.classList.add('dropdown-overlay');
+      overlay.addEventListener('click', function() {
+        this.parentNode.titleButton.focus();
+        this.parentNode.isShown = false;
+      });
+      return overlay;
+    },
+
+    /**
      * Creates dropdown title element.
      * @type {HTMLElement}
      * @private
      */
     createTitle_: function() {
       var el = this.ownerDocument.createElement('button');
       el.classList.add('dropdown-title');
       el.iid = -1;
       el.controller = this;
+      el.enterPressed = false;
+
       el.addEventListener('click', function f(e) {
+        this.focus();

[xiyuan, 2011/08/09 16:43:39]

Think a focusable element should automatically get focus when you click on it.
Do we need this focus call?

[altimofeev, 2011/08/09 17:17:30]

It doesn't get the focus, when menu is being opened. Actually, I don't know
why...

         this.controller.isShown = !this.controller.isShown;
+
+        if (this.enterPressed) {

[xiyuan, 2011/08/09 16:43:39]

Does this mean user needs to hit "enter" on the dropdown container and then
click on the title button? It's a bit confusing to user if that's the case.
Think we should auto close the container when enter is pressed.

[altimofeev, 2011/08/09 17:17:30]

Not exactly. There are 3 cases:
1. User clicks on the button - menu is opened or closed (no item action).
|this.enterPressed| == false.
2. User hits Enter, menu is shown - action for the selected item is fired. Menu
is being closed. |this.enterPressed| == true. (keyboard event is handled before
'onclick').
3. User hits Enter, menu is closed - menu is opened. |this.enterPressed| ==
false (see keydown handler).

General idea is that 
  hitting Enter on focused button == mouse click from events point of view

+          this.enterPressed = false;
+          if (!this.controller.isShown) {
+            var item = this.controller.container.selectedItem.lastElementChild;
+            if (item.iid >= 0 && !item.classList.contains('disabled-item'))
+              chrome.send('networkItemChosen', [item.iid]);
+          }
+        }
       });
       return el;
+    },
+
+    /**
+     * Handles keydown event from the keyboard.
+     * @private
+     * @param {!Object} e Keydown event.

[xiyuan, 2011/08/09 16:43:39]

nit: {!Event}

[altimofeev, 2011/08/09 17:17:30]

Done.

+     */
+    keyDownHandler_: function(e) {
+      if (!this.isShown)
+        return;
+      var selected = this.container.selectedItem;
+      switch(e.keyCode) {
+        case 38: {  // Key up.
+          do {
+            selected = selected.previousSibling;
+            if (!selected)
+              selected = this.container.lastElementChild;
+          } while (selected.iid < 0);
+          this.container.selectItem(selected);
+          break;
+        }
+        case 40: {  // Key down.
+          do {
+            selected = selected.nextSibling;
+            if (!selected)
+              selected = this.container.firstItem;
+          } while (selected.iid < 0);
+          this.container.selectItem(selected);
+          break;
+        }
+        case 27: {  // Esc.
+          this.isShown = false;
+          break;
+        }
+        case 9: {  // Tab.

[xiyuan, 2011/08/09 16:43:39]

We should do this in "blur" handler instead of capturing tab. And if we use a
"blur" handler, we probably could get rid of the overlay as well.

[altimofeev, 2011/08/09 17:17:30]

1. As I have stated, button loses focus when menu is being shown. So processing
blur is not so simple.
2. Standard select do not lose the focus, when user clicks outside of the list.
List is closed, but focus stays with the select element. Also, no other action
is being acted (you can't open another select or push the button while one
select is opened).
3. Adding blur handler will involve more code, so current implementation looks
better for me.

+          this.isShown = false;
+          break;
+        }
+        case 13: {  // Enter.
+          this.titleButton.enterPressed = true;
+          break;
+        }
+      };
     }
   };
 
   /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var NetworkScreen = cr.ui.define('div');
 
@@ skipping 77 matching lines @@
   };
 
   NetworkScreen.updateNetworkTitle = function(title, icon) {
     $('connect').updateNetworkTitle(title, icon);
   };
 
   return {
     NetworkScreen: NetworkScreen
   };
 });