Improve the accessibility of some of the oobe html pages.

chrome/browser/resources/chromeos/login/oobe_screen_user_image.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 user image screen implementation.
  */
 
 cr.define('oobe', function() {
   /**
@@ skipping 80 matching lines @@
   };
 
   /**
    * Appends new image to the end of the image list.
    * @param {string} src A url for the user image.
    * @param {function} clickHandler A handler for click on image.
    */
   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);
     $('user-image-list').appendChild(imageElement);
   };
 
   /**
    * Appends received images to the list.
    * @param {List} images A list of urls to user images.
    */
   UserImageScreen.addUserImages = function(images) {
     for (var i = 0; i < images.length; i++) {
       var imageUrl = images[i];
       UserImageScreen.addUserImage(
           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);
+      }
+    });
   };
 
   /**
    * Selects the specified user image and shows it in preview.
    * @param {number} index The index of the image to select.
    */
   UserImageScreen.selectUserImage = function(index) {
     var userImageList = $('user-image-list');
     var userImageScreen = $('user-image');
     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;
   };
 
   return {
     UserImageScreen: UserImageScreen
   };
 });