Fix several accessibility issues on login screen

(1) Remove extra focus on the disabled dropdown menu button.

(2) Make password field focused only once instead of three times.

(3) Assign the user name as ARIA label for the entire pod.

(4) Skip image until more descriptive texts are available.

Bug: 746568
Change-Id: I4ed9918947a3a7f03fe84ebbf64ab94be7e88475
Reviewed-on: https://chromium-review.googlesource.com/578459Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#488363}

ui/login/account_picker/md_user_pod_row.js

@@ -1160,14 +1160,14 @@ cr.define('login', function() {
      */
     get statsMapElements() {
       return {
-          'BrowsingHistory':
-              this.querySelector('.action-box-remove-user-warning-history'),
-          'Passwords':
-              this.querySelector('.action-box-remove-user-warning-passwords'),
-          'Bookmarks':
-              this.querySelector('.action-box-remove-user-warning-bookmarks'),
-          'Autofill':
-              this.querySelector('.action-box-remove-user-warning-autofill')
+        'BrowsingHistory':
+            this.querySelector('.action-box-remove-user-warning-history'),
+            'Passwords':
+                this.querySelector('.action-box-remove-user-warning-passwords'),
+            'Bookmarks':
+                this.querySelector('.action-box-remove-user-warning-bookmarks'),
+            'Autofill':
+                this.querySelector('.action-box-remove-user-warning-autofill')
       }
     },
 
@@ -1243,11 +1243,8 @@ cr.define('login', function() {
         this.passwordLabelElement.textContent = this.authValue;
 
       this.updateActionBoxArea();
-
-      this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
-        'passwordFieldAccessibleName', this.user_.emailAddress));
-
       this.customizeUserPodPerUserType();
+      this.updateAriaLabels_();
     },
 
     updateActionBoxArea: function() {
@@ -1258,12 +1255,6 @@ cr.define('login', function() {
 
       this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
 
-      this.actionBoxAreaElement.setAttribute(
-          'aria-label', loadTimeData.getStringF(
-              'podMenuButtonAccessibleName', this.user_.emailAddress));
-      this.actionBoxMenuRemoveElement.setAttribute(
-          'aria-label', loadTimeData.getString(
-               'podMenuRemoveItemAccessibleName'));
       this.actionBoxMenuTitleNameElement.textContent = this.user_.isOwner ?
           loadTimeData.getStringF('ownerUserPattern', this.user_.displayName) :
           this.user_.displayName;
@@ -1299,6 +1290,27 @@ cr.define('login', function() {
       }
     },
 
+    /**
+     * Updates ARIA labels and sets hidden states. All updates related to ARIA
+     * should go here.
+     * @private
+     */
+    updateAriaLabels_: function() {
+      this.setAttribute('aria-label', this.user_.displayName);
+      this.querySelector('.password-container')
+          .setAttribute(
+              'aria-label',
+              loadTimeData.getStringF(
+                  'passwordFieldAccessibleName', this.user_.emailAddress));
+      this.actionBoxAreaElement.setAttribute(
+          'aria-label',
+          loadTimeData.getStringF(
+              'podMenuButtonAccessibleName', this.user_.emailAddress));
+      this.actionBoxMenuRemoveElement.setAttribute(
+          'aria-label',
+          loadTimeData.getString('podMenuRemoveItemAccessibleName'));
+    },
+
     isPinReady: function() {
       return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0;
     },

ui/login/account_picker/md_user_pod_template.html

@@ -37,7 +37,7 @@
   <div class="large-pod">
     <div class="user-image-pane">
       <div class="user-image-container">
-        <img class="user-image" alt>
+        <img class="user-image" alt aria-hidden="true">
       </div>
       <div class="badge-container">
         <iron-icon class="legacy-supervised-badge"
@@ -63,7 +63,7 @@
         <div class="password-entry-container">
           <div class="password-container">
             <input type="password" class="password"
-                placeholder="$i18n{passwordHint}">
+                placeholder="$i18n{passwordHint}" aria-hidden="true">
           </div>
 <if expr="chromeos">
           <div class="capslock-hint-container">
@@ -98,10 +98,10 @@
         </div>
       </div>
       <div class="name-container">
-        <div class="name"></div>
+        <div class="name" aria-hidden="true"></div>
         <div class="action-box-area">
           <paper-icon-button class="action-box-button" disabled
-                             icon="user-pod:dropdown">
+                             icon="user-pod:dropdown" aria-hidden="true">
           </paper-icon-button>
           <div class="action-box-button ripple-circle"></div>
           <iron-icon icon="cr:more-vert" class="action-box-icon"></iron-icon>
@@ -200,9 +200,9 @@
   </div>
   <div class="small-pod" hidden>
     <div class="small-user-image-container">
-      <img class="user-image small-pod-image" alt>
+      <img class="user-image small-pod-image" alt aria-hidden="true">
     </div>
-    <div class="small-pod-name"></div>
+    <div class="small-pod-name" aria-hidden="true"></div>
   </div>
 </div>