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

BUG=chromium-os:20044
TEST=Add two or more users.  Check that you can tab to all users and remove buttons, and that you can remove users.


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

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

4 files changed, 23 insertions, 8 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 970d24c..4fa7c08 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -14128,6 +14128,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_LOGIN_POD_PASSWORD_FIELD_ACCESSIBLE_NAME" desc="Text to be spoken when the focus is set to the password field of a user pod on the login screen.">
         Password for <ph name="USER_EMAIL_ADDRESS">$1<ex>john.doe@example.com</ex></ph>
       </message>
+      <message name="IDS_LOGIN_POD_REMOVE_BUTTON_ACCESSIBLE_NAME" desc="Text to be spoken when the focus is set to the remove button of a user pod on the login screen.">
+        Remove user <ph name="USER_EMAIL_ADDRESS">$1<ex>john.doe@example.com</ex></ph>
+      </message>
       <message name="IDS_LOGIN_VERSION_LABEL_FORMAT" desc="Login screen version text format.">
         <ph name="PRODUCT_NAME">$1<ex>Google Chrome</ex></ph> <ph name="PRODUCT_VERSION">$2<ex>15.0.0.0</ex></ph> (Platform <ph name="PLATFORM_VERSION">$3<ex>900.0-11.09.01</ex></ph>)
       </message>
diff --git a/chrome/browser/resources/chromeos/login/user_pod_row.js b/chrome/browser/resources/chromeos/login/user_pod_row.js
index 8b9c277..241e95c 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.js
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.js
@@ -15,6 +15,10 @@ cr.define('login', function() {
   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.
@@ -40,7 +44,7 @@ cr.define('login', function() {
     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));
@@ -49,6 +53,8 @@ cr.define('login', function() {
           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));
     },
@@ -175,6 +181,9 @@ cr.define('login', function() {
         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',
@@ -319,10 +328,7 @@ cr.define('login', function() {
       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;
       }
@@ -403,6 +409,8 @@ cr.define('login', function() {
 
       this.appendChild(userPod);
       userPod.initialize();
+      var index = this.findIndex_(userPod);
+      userPod.removeUserButtonElement.tabIndex = TAB_INDEX_REMOVE_USER;
     },
 
     /**
@@ -470,6 +478,7 @@ cr.define('login', function() {
       // 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;
       }
     },
 
@@ -491,9 +500,10 @@ cr.define('login', function() {
           } 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;
@@ -503,7 +513,7 @@ cr.define('login', function() {
           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;
       }
diff --git a/chrome/browser/resources/chromeos/login/user_pod_template.html b/chrome/browser/resources/chromeos/login/user_pod_template.html
index 674e963..ea7736b 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_template.html
+++ b/chrome/browser/resources/chromeos/login/user_pod_template.html
@@ -11,5 +11,5 @@ defined in user_pod_row.js.
   <button class="enter-guest-button" i18n-content="enterGuestButton"
           i18n-values="aria-label:enterGuestButtonAccessibleName"></button>
   <button class="signin-button" i18n-content="signinButton"></button>
-  <button class="remove-user-button" hidden tabindex="-1"></button>
+  <button class="remove-user-button" hidden></button>
 </div>
diff --git a/chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc b/chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc
index 64c98fa..d191d55 100644
--- a/chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc
+++ b/chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc
@@ -244,6 +244,8 @@ void SigninScreenHandler::GetLocalizedStrings(
       l10n_util::GetStringUTF16(IDS_SIGNIN_SCREEN_TITLE));
   localized_strings->SetString("passwordHint",
       l10n_util::GetStringUTF16(IDS_LOGIN_POD_EMPTY_PASSWORD_TEXT));
+  localized_strings->SetString("removeButtonAccessibleName",
+      l10n_util::GetStringUTF16(IDS_LOGIN_POD_REMOVE_BUTTON_ACCESSIBLE_NAME));
   localized_strings->SetString("passwordFieldAccessibleName",
       l10n_util::GetStringUTF16(IDS_LOGIN_POD_PASSWORD_FIELD_ACCESSIBLE_NAME));
   localized_strings->SetString("signinButton",