Make the OOBE network menu accessible by improving keyboard handling

chrome/browser/resources/chromeos/login/network_dropdown.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 Network drop-down implementation.
  */
 
 cr.define('cr.ui', 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;
+
+      this.setAttribute('role', 'menu');
     },
 
     /**
      * 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;
+      this.previousSibling.setAttribute(
+          'aria-activedescendant', this.id + selectedItem.id);

[altimofeev, 2011/09/19 08:13:14]

Shouldn't it be just 'selectedItem.id'?

     }
   };
 
   /**
    * 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_());
+      this.appendChild(this.title_ = this.createTitle_());
       this.appendChild(new DropDownContainer());
 
       this.isShown = false;
       this.addEventListener('keydown', this.keyDownHandler_);
+
+      this.title_.id = this.id + '-dropdown';
+      this.title_.setAttribute('role', 'listbox');
     },
 
     /**
      * Returns true if dropdown menu is shown.
      * @type {bool} Whether menu element is shown.
      */
     get isShown() {
       return !this.container.hidden;
     },
 
@@ skipping 88 matching lines @@
       itemElement.appendChild(itemContentElement);
       itemElement.iid = item.id;
       itemElement.controller = this;
       var enabled = 'enabled' in item && item.enabled;
       if (!enabled)
         itemElement.classList.add('disabled-item');
 
       if (item.id > 0) {
         var wrapperDiv = this.ownerDocument.createElement('div');
         wrapperDiv.classList.add('dropdown-item-container');
+        wrapperDiv.setAttribute('role', 'menuitem');
+        wrapperDiv.id = this.id + item.id;
         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 = false;
@@ skipping 27 matching lines @@
       return overlay;
     },
 
     /**
      * Creates dropdown title element.
      * @type {HTMLElement}
      * @private
      */
     createTitle_: function() {
       var image = this.ownerDocument.createElement('img');
+      image.alt = "";
       var text = this.ownerDocument.createElement('div');
 
       var el = this.ownerDocument.createElement('div');
       el.appendChild(image);
       el.appendChild(text);
 
       el.tabIndex = 0;
       el.classList.add('dropdown-title');
       el.iid = -1;
       el.controller = this;
@@ skipping 21 matching lines @@
       });
       return el;
     },
 
     /**
      * Handles keydown event from the keyboard.
      * @private
      * @param {!Event} e Keydown event.
      */
     keyDownHandler_: function(e) {
-      if (!this.isShown)

[altimofeev, 2011/09/19 08:13:14]

Why do you need handle keys if menu isn't shown?

-        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.
           this.isShown = false;
           break;
         }
         case 13: {  // Enter.
+          if (!this.isShown)
+            return;
           var button = this.titleButton;
           if (!button.opening) {
             button.focus();
             this.isShown = false;
             var item =
                 button.controller.container.selectedItem.lastElementChild;
             if (item.iid >= 0 && !item.classList.contains('disabled-item'))
               chrome.send('networkItemChosen', [item.iid]);
           } else {
             button.opening = false;
@@ skipping 39 matching lines @@
         DropDown.activeElementId_ = '';
         chrome.send('networkDropdownHide', []);
       }
     }
   };
 
   return {
     DropDown: DropDown
   };
 });