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');
       // Whether scroll has just happened.
       this.scrollJustHappened = false;
     },
 
     /**
      * Gets scroll action to be done for the item.
      * @param {!Object} item Menu item.
      * @return {integer} -1 for scroll up; 0 for no action; 1 for scroll down.
      */
     scrollAction: function(item) {
@@ skipping 13 matching lines @@
      */
     selectItem: function(selectedItem, mouseOver) {
       if (mouseOver && this.scrollJustHappened) {
         this.scrollJustHappened = false;
         return;
       }
       if (this.selectedItem)
         this.selectedItem.classList.remove('hover');
       selectedItem.classList.add('hover');
       this.selectedItem = selectedItem;
+      if (!this.hidden) {
+        this.previousSibling.setAttribute(
+            'aria-activedescendant', selectedItem.id);
+      }
       var action = this.scrollAction(selectedItem);
       if (action != 0) {
         selectedItem.scrollIntoView(action < 0);
         this.scrollJustHappened = true;
       }
     }
   };
 
   /**
    * 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', 'button');
+      this.title_.setAttribute('aria-haspopup', 'true');
     },
 
     /**
      * Returns true if dropdown menu is shown.
      * @type {bool} Whether menu element is shown.
      */
     get isShown() {
       return !this.container.hidden;
     },
 
     /**
      * Sets dropdown menu visibility.
      * @param {bool} show New visibility state for dropdown menu.
      */
     set isShown(show) {
       this.firstElementChild.hidden = !show;
       this.container.hidden = !show;
-      if (show)
+      if (show) {
         this.container.selectItem(this.container.firstItem, false);
+        this.title_.setAttribute('aria-pressed', 'true');
+      } else {
+        this.title_.setAttribute('aria-pressed', 'false');
+        this.title_.removeAttribute('aria-activedescendant');
+      }
     },
 
     /**
      * Returns title button.
      */
     get titleButton() {
       return this.children[1];
     },
 
     /**
@@ skipping 53 matching lines @@
       if (item.id == DropDown.ITEM_DIVIDER_ID) {
         className = 'dropdown-divider';
         itemContentElement = this.ownerDocument.createElement('hr');
       } else {
         var span = this.ownerDocument.createElement('span');
         itemContentElement = span;
         span.textContent = item.label;
         if ('bold' in item && item.bold)
           span.classList.add('bold');
         var image = this.ownerDocument.createElement('img');
+        image.alt = '';
         if (item.icon)
           image.src = item.icon;
       }
 
       var itemElement = this.ownerDocument.createElement('div');
       itemElement.classList.add(className);
       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.setAttribute('role', 'menuitem');
+        wrapperDiv.id = this.id + item.id;
+        if (!enabled)
+          wrapperDiv.setAttribute('aria-disabled', 'true');
         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;
@@ skipping 28 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;
       el.inFocus = false;
       el.opening = false;
 
       el.addEventListener('click', function f(e) {
         this.controller.isShown = !this.controller.isShown;
       });
 
       el.addEventListener('focus', function(e) {
         this.inFocus = true;
       });
 
       el.addEventListener('blur', function(e) {
         this.inFocus = false;
       });
 
       el.addEventListener('keydown', function f(e) {
-        if (this.inFocus && !this.controller.isShown && e.keyCode == 13) {
-          // Enter has been pressed.
+        if (this.inFocus && !this.controller.isShown &&
+            (e.keyCode == 13 || e.keyCode == 32)) {
+          // Enter or space has been pressed.
           this.opening = true;
           this.controller.isShown = true;
         }
       });
       return el;
     },
 
     /**
      * Handles keydown event from the keyboard.
      * @private
@@ skipping 90 matching lines @@
    * Refreshes network drop-down. Should be called on language change.
    */
   DropDown.refresh = function() {
     chrome.send('networkDropdownRefresh', []);
   };
 
   return {
     DropDown: DropDown
   };
 });