Improve the accessibility of some of the oobe html pages. This is just a start.

BUG=chromium-os:14807
TEST=manual testing
Review URL: http://codereview.chromium.org/7569004

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

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

@@ -177,6 +177,7 @@ hr.bottom {
   border-radius: 4px;
   height: 50px;
   margin: 0 10px 8px 0;
+  outline: none;
   padding: 4px;
   width: 50px;
 }

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"
-        class="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>
+      <select id="language-select" class="menu-control"></select>
     </div>
   </div>
   <div class="control-with-label">
-    <div i18n-content="selectKeyboard" class="label"></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>
+      <select id="keyboard-select" class="menu-control"></select>
     </div>
   </div>
   <div class="control-with-label">
-    <div i18n-content="selectNetwork" class="label"
-        class="menu-control"></div>
+    <label for="networks-list" i18n-content="selectNetwork"
+        class="label menu-control"></label>
     <div class="menu-area">
-      <div id="networks-list" class="menu-control"></div>
+      <div id="networks-list" class="menu-control"
+           tabindex="0" role="button" aria-haspopup="true"></div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

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

@@ -3,8 +3,9 @@
     <p i18n-content="userImageScreenDescription"></p>
   </div>
   <div id="user-image-screen-main">
-    <div id="user-image-list">
+    <div id="user-image-list" role="listbox">
     </div>
-    <img id="user-image-preview" src="chrome://theme/IDR_LOGIN_DEFAULT_USER">
+    <img id="user-image-preview" alt=""
+         src="chrome://theme/IDR_LOGIN_DEFAULT_USER">
   </div>
 </div>

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

@@ -98,6 +98,10 @@ cr.define('oobe', function() {
   UserImageScreen.addUserImage = function(src, clickHandler) {
     var imageElement = document.createElement('img');
     imageElement.src = src;
+    imageElement.setAttribute('role', 'option');
+    imageElement.setAttribute('tabindex', '-1');
+    imageElement.setAttribute(
+        'aria-label', src.replace(/(.*\/|\.png)/g, '').replace(/_/g, ' '));
     imageElement.addEventListener('click',
                                   clickHandler,
                                   false);
@@ -115,6 +119,20 @@ cr.define('oobe', function() {
           imageUrl,
           UserImageScreen.handleImageClick);
     }
+
+    var userImageScreen = $('user-image');
+    var userImageList = $('user-image-list');
+    userImageList.addEventListener('keydown', function(e) {
+      var prevIndex = userImageScreen.selectedUserImage_;
+      var len = userImageList.children.length;
+      if (e.keyCode == 39 || e.keyCode == 40) {  // right or down
+        if (prevIndex < len - 1)
+          UserImageScreen.selectUserImage(prevIndex + 1);
+      } else if (e.keyCode == 37 || e.keyCode == 38) {  // left or up
+        if (prevIndex > 0)
+          UserImageScreen.selectUserImage(prevIndex - 1);
+      }
+    });
   };
 
   /**
@@ -127,10 +145,13 @@ cr.define('oobe', function() {
     var prevIndex = userImageScreen.selectedUserImage_;
     if (prevIndex != -1) {
       userImageList.children[prevIndex].classList.remove('user-image-selected');
+      userImageList.children[prevIndex].setAttribute('tabIndex', '-1');
     }
     if (index != -1) {
       var selectedImage = userImageList.children[index];
       selectedImage.classList.add('user-image-selected');
+      selectedImage.setAttribute('tabIndex', '0');
+      selectedImage.focus();
       $('user-image-preview').src = selectedImage.src;
     }
     userImageScreen.selectedUserImage_ = index;