Make user remove button focusable, and set up the correct tab order.

chrome/browser/resources/chromeos/login/user_pod_row.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 User pod row implementation.
  */
 
 cr.define('login', function() {
   // Pod width. 170px Pod + 10px padding + 10px margin on both sides.
   const POD_WIDTH = 170 + 2 * (10 + 10);
 
   // Oauth token status. These must match UserManager::OAuthTokenStatus.
   const OAUTH_TOKEN_STATUS_UNKNOWN = 0;
   const OAUTH_TOKEN_STATUS_INVALID = 1;
   const OAUTH_TOKEN_STATUS_VALID = 2;
 
+  // Tab index for pods.  Update these when adding new controls.
+  const TAB_INDEX_POD_INPUT = 1;
+  const TAB_INDEX_REMOVE_USER = 2;
+
   /**
    * Helper function to remove a class from given element.
    * @param {!HTMLElement} el Element whose class list to change.
    * @param {string} cl Class to remove.
    */
   function removeClass(el, cl) {
     el.classList.remove(cl);
   }
 
   /**
    * Creates a user pod.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var UserPod = cr.ui.define(function() {
     return $('user-pod-template').cloneNode(true);
   });
 
   UserPod.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       // Make this focusable
       if (!this.hasAttribute('tabindex'))
-        this.tabIndex = 0;
+        this.tabIndex = TAB_INDEX_POD_INPUT;
 
       this.addEventListener('mousedown',
           this.handleMouseDown_.bind(this));
 
       this.enterButtonElement.addEventListener('click',
           this.activate.bind(this));
       this.signinButtonElement.addEventListener('click',
           this.activate.bind(this));
+      this.removeUserButtonElement.addEventListener('click',
+          this.handleRemoveButtonClick_.bind(this));
       this.removeUserButtonElement.addEventListener('mouseout',
           this.handleRemoveButtonMouseOut_.bind(this));
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       if (!this.isGuest) {
         this.passwordEmpty = true;
@@ skipping 106 matching lines @@
       if (this.isGuest) {
         this.imageElement.title = userDict.name;
         this.enterButtonElement.hidden = false;
         this.passwordElement.hidden = true;
         this.signinButtonElement.hidden = true;
       } else {
         var needSignin = this.needGaiaSignin;
         this.imageElement.title = userDict.emailAddress;
         this.enterButtonElement.hidden = true;
         this.passwordElement.hidden = needSignin;
+        this.removeUserButtonElement.setAttribute(
+            'aria-label', localStrings.getStringF('removeButtonAccessibleName',
+                                                  userDict.emailAddress));
         this.passwordElement.setAttribute('aria-label',
                                           localStrings.getStringF(
                                               'passwordFieldAccessibleName',
                                               userDict.emailAddress));
         this.signinButtonElement.hidden = !needSignin;
       }
     },
 
     /**
      * Whether we are a guest pod or not.
@@ skipping 124 matching lines @@
         this.activeRemoveButton = true;
     },
 
     /**
      * Handles mousedown event.
      */
     handleMouseDown_: function(e) {
       if (!this.parentNode.rowEnabled)
         return;
       var handled = false;
-      if (e.target == this.removeUserButtonElement) {
-        this.handleRemoveButtonClick_(e);
-        handled = true;
-      } else if (!this.signinButtonElement.hidden) {
+      if (!this.signinButtonElement.hidden) {
         this.parentNode.showSigninUI(this.user.emailAddress);
         handled = true;
       }
       if (handled) {
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     }
   };
 
@@ skipping 60 matching lines @@
      */
     addUserPod: function(user, animated) {
       var userPod = this.createUserPod(user);
       if (animated) {
         userPod.classList.add('init');
         userPod.nameElement.classList.add('init');
       }
 
       this.appendChild(userPod);
       userPod.initialize();
+      var index = this.findIndex_(userPod);
+      userPod.removeUserButtonElement.tabIndex = TAB_INDEX_REMOVE_USER;
     },
 
     /**
      * Ensures the given pod is visible.
      * @param {UserPod} pod Pod to scroll into view.
      */
     scrollPodIntoView: function(pod) {
       var podIndex = this.findIndex_(pod);
       if (podIndex == -1)
         return;
@@ skipping 47 matching lines @@
      */
     loadPods: function(users, animated) {
       // Clear existing pods.
       this.innerHTML = '';
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
 
       // Popoulate the pod row.
       for (var i = 0; i < users.length; ++i) {
         this.addUserPod(users[i], animated);
+        this.pods[i].tabIndex = TAB_INDEX_POD_INPUT;
       }
     },
 
     /**
      * Focuses a given user pod or clear focus when given null.
      * @param {UserPod} pod User pod to focus or null to clear focus.
      */
     focusPod: function(pod) {
       if (this.focusedPod_ == pod)
         return;
 
       if (pod) {
         for (var i = 0; i < this.pods.length; ++i) {
           this.pods[i].activeRemoveButton = false;
           if (this.pods[i] == pod) {
             pod.classList.remove("faded");
             pod.classList.add("focused");
             pod.tabIndex = -1;  // Make it not keyboard focusable.
           } else {
             this.pods[i].classList.remove('focused');
             this.pods[i].classList.add('faded');
-            this.pods[i].tabIndex = 0;
+            this.pods[i].tabIndex = TAB_INDEX_POD_INPUT;
           }
         }
+        pod.mainInput.tabIndex = TAB_INDEX_POD_INPUT;
         pod.focusInput();
 
         this.focusedPod_ = pod;
         this.scrollPodIntoView(pod);
       } else {
         for (var i = 0; i < this.pods.length; ++i) {
           this.pods[i].classList.remove('focused');
           this.pods[i].classList.remove('faded');
           this.pods[i].activeRemoveButton = false;
-          this.pods[i].tabIndex = 0;
+          this.pods[i].tabIndex = TAB_INDEX_POD_INPUT;
         }
         this.focusedPod_ = undefined;
       }
     },
 
     /**
      * Returns the currently activated pod.
      */
     get activated() {
       return this.activatedPod_;
@@ skipping 153 matching lines @@
         this.ownerDocument.removeEventListener(
             event, this.listeners_[event][0], this.listeners_[event][1]);
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });