Make the OOBE network menu accessible by improving keyboard handling

and adding ARIA attributes.

BUG=96906
TEST=manual testing

Review URL: http://codereview.chromium.org/7917015

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@102258 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/chromeos/login/network_dropdown.js

@@ -24,6 +24,7 @@ cr.define('cr.ui', function() {
       this.selectedItem = null;
       // First item which could be selected.
       this.firstItem = null;
+      this.setAttribute('role', 'menu');
       // Whether scroll has just happened.
       this.scrollJustHappened = false;
     },
@@ -57,6 +58,10 @@ cr.define('cr.ui', function() {
         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);
@@ -80,11 +85,15 @@ cr.define('cr.ui', function() {
     /** @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');
     },
 
     /**
@@ -102,8 +111,13 @@ cr.define('cr.ui', function() {
     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');
+      }
     },
 
     /**
@@ -177,6 +191,7 @@ cr.define('cr.ui', function() {
         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;
       }
@@ -192,6 +207,10 @@ cr.define('cr.ui', function() {
 
       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');
@@ -240,6 +259,7 @@ cr.define('cr.ui', function() {
      */
     createTitle_: function() {
       var image = this.ownerDocument.createElement('img');
+      image.alt = '';
       var text = this.ownerDocument.createElement('div');
 
       var el = this.ownerDocument.createElement('div');
@@ -266,8 +286,9 @@ cr.define('cr.ui', function() {
       });
 
       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;
         }

chrome/browser/resources/chromeos/login/oobe.css

@@ -225,6 +225,7 @@ html[dir=rtl]  .step.left {
 }
 
 .label {
+  display: block;
   margin: 5px 5px 5px 0;
   padding: 5px 5px 5px 0;
   width: 170px;

chrome/browser/resources/chromeos/login/oobe_screen_network.html

 <div class="step hidden" id="connect">
   <div class="control-with-label">
-    <div i18n-content="selectLanguage" class="label menu-control"></div>
+    <label for="language-select" i18n-content="selectLanguage"
+           class="label menu-control"></label>
     <div class="menu-area">
       <select id="language-select" class="menu-control"></select>
     </div>
   </div>
   <div class="control-with-label">
-    <div i18n-content="selectKeyboard" class="label menu-control"></div>
+    <label for="keyboard-select" i18n-content="selectKeyboard"
+           class="label menu-control"></label>
     <div class="menu-area">
       <select id="keyboard-select" class="menu-control"></select>
     </div>
   </div>
   <div class="control-with-label">
-    <div i18n-content="selectNetwork" class="label menu-control"></div>
+    <label for="networks-list-dropdown" i18n-content="selectNetwork"
+           class="label menu-control"></label>
     <div class="menu-area">
-      <div id="networks-list" class="menu-control" aria-haspopup="true"></div>
+      <div id="networks-list" class="menu-control"></div>
     </div>
   </div>
 </div>

chrome/browser/resources/chromeos/login/screen_offline_message.html

@@ -6,9 +6,10 @@
         i18n-content="captivePortalMessage"></span>
   </div>
   <div id="offline-network-control" class="control-with-label">
-    <div i18n-content="selectNetwork" class="label menu-control"></div>
+    <label for="offline-networks-list-dropdown" i18n-content="selectNetwork"
+        class="label menu-control"></label>
     <div class="menu-area">
-      <div id="offline-networks-list" class="menu-control" aria-haspopup="true">
+      <div id="offline-networks-list" class="menu-control">
       </div>
     </div>
   </div>