ChromeVox access to login user pod menus

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 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() {
   /**
@@ skipping 74 matching lines @@
   /**
    * Tab order for user pods. Update these when adding new controls.
    * @enum {number}
    * @const
    */
   var UserPodTabOrder = {
     POD_INPUT: 1,        // Password input field, Action box menu button, and
                          // the pod itself.
     POD_CUSTOM_ICON: 2,  // Pod custom icon next to password input field.
     HEADER_BAR: 3,       // Buttons on the header bar (Shutdown, Add User).
-    PAD_MENU_ITEM: 4     // User pad menu items (Remove this user).
+    POD_MENU_ITEM: 4     // User pad menu items (User info, Remove user).
   };
 
   /**
    * Supported authentication types. Keep in sync with the enum in
    * chrome/browser/signin/screenlock_bridge.h
    * @enum {number}
    * @const
    */
   var AUTH_TYPE = {
     OFFLINE_PASSWORD: 0,
@@ skipping 606 matching lines @@
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       this.actionBoxAreaElement.addEventListener('mousedown',
                                                  stopEventPropagation);
       this.actionBoxAreaElement.addEventListener('click',
           this.handleActionAreaButtonClick_.bind(this));
       this.actionBoxAreaElement.addEventListener('keydown',
           this.handleActionAreaButtonKeyDown_.bind(this));
 
+      this.actionBoxMenuTitleElement.addEventListener('keydown',
+          this.handleMenuTitleElementKeyDown_.bind(this));
+      this.actionBoxMenuTitleElement.addEventListener('blur',
+          this.handleMenuTitleElementBlur_.bind(this));
+
       this.actionBoxMenuRemoveElement.addEventListener('click',
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
-      this.actionBoxRemoveUserWarningButtonElement.addEventListener(
-          'click',
+      this.actionBoxRemoveUserWarningButtonElement.addEventListener('click',
           this.handleRemoveUserConfirmationClick_.bind(this));
-        this.actionBoxRemoveUserWarningButtonElement.addEventListener(
-            'keydown',
-            this.handleRemoveUserConfirmationKeyDown_.bind(this));
+      this.actionBoxRemoveUserWarningButtonElement.addEventListener('keydown',
+          this.handleRemoveUserConfirmationKeyDown_.bind(this));
 
       var pinKeyboard = $('pin-keyboard');
       // The pin keyboard is not present on the md user manager.
       if (pinKeyboard) {
         pinKeyboard.addEventListener('submit',
             this.handlePinSubmitted_.bind(this));
       }
 
       var customIcon = this.customIconElement;
       customIcon.parentNode.replaceChild(new UserPodCustomIcon(), customIcon);
@@ skipping 181 matching lines @@
     /**
      * Gets user type bubble like multi-profiles policy restriction message.
      * @type {!HTMLDivElement}
      */
     get userTypeBubbleElement() {
       return this.querySelector('.user-type-bubble');
     },
 
     /**
      * Gets action box menu.
-     * @type {!HTMLInputElement}
+     * @type {!HTMLDivElement}

[Greg Levin, 2016/06/09 13:44:45]

No idea if these comment tags should be fixed like this, but the new labels I've
used seem more accurate :-/

      */
     get actionBoxMenu() {
       return this.querySelector('.action-box-menu');
     },
 
     /**
+     * Gets action box menu title (user name and email).
+     * @type {!HTMLDivElement}
+     */
+    get actionBoxMenuTitleElement() {
+      return this.querySelector('.action-box-menu-title');
+    },
+
+    /**
      * Gets action box menu title, user name item.
-     * @type {!HTMLInputElement}
+     * @type {!HTMLSpanElement}
      */
     get actionBoxMenuTitleNameElement() {
       return this.querySelector('.action-box-menu-title-name');
     },
 
     /**
      * Gets action box menu title, user email item.
-     * @type {!HTMLInputElement}
+     * @type {!HTMLSpanElement}
      */
     get actionBoxMenuTitleEmailElement() {
       return this.querySelector('.action-box-menu-title-email');
     },
 
     /**
      * Gets action box menu, remove user command item.
      * @type {!HTMLInputElement}
      */
     get actionBoxMenuCommandElement() {
@@ skipping 183 matching lines @@
         if (!this.parentNode.isFocused(this)) {
           this.parentNode.focusPod(undefined, true);
           this.actionBoxAreaElement.focus();
         }
 
         // Hide user-type-bubble.
         this.userTypeBubbleElement.classList.remove('bubble-shown');
 
         this.actionBoxAreaElement.classList.add('active');
 
+        // Invisible focus causes ChromeVox to read user name and email.
+        this.actionBoxMenuTitleElement.tabIndex = UserPodTabOrder.POD_MENU_ITEM;
+        this.actionBoxMenuTitleElement.focus();

[Greg Levin, 2016/06/09 13:44:45]

I tried using aria-activedescendant to get CV to read name/email when menu was
opened, but I couldn't get it working.  All the examples I found applied
aria-activedescendant to actual input elements, and this menu is just divs and
spans that manage input via js.

+
         // If the user pod is on either edge of the screen, then the menu
         // could be displayed partially ofscreen.
         this.actionBoxMenu.classList.remove('left-edge-offset');
         this.actionBoxMenu.classList.remove('right-edge-offset');
 
         var offsetLeft =
             cr.ui.login.DisplayManager.getOffset(this.actionBoxMenu).left;
         var menuWidth = this.actionBoxMenu.offsetWidth;
         if (offsetLeft < 0)
           this.actionBoxMenu.classList.add('left-edge-offset');
@@ skipping 221 matching lines @@
         case 'Enter':
         case 'U+0020':  // Space
           if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive)
             this.isActionBoxMenuActive = true;
           e.stopPropagation();
           break;
         case 'Up':
         case 'Down':
           if (this.isActionBoxMenuActive) {
             this.actionBoxMenuRemoveElement.tabIndex =
-                UserPodTabOrder.PAD_MENU_ITEM;
+                UserPodTabOrder.POD_MENU_ITEM;
             this.actionBoxMenuRemoveElement.focus();
           }
           e.stopPropagation();
           break;
+        // Ignore these two, so ChromeVox hotkeys don't close the menu before
+        // they can navigate through it.
+        case 'Shift':
+        case 'Win':
+          break;
         case 'U+001B':  // Esc
           this.isActionBoxMenuActive = false;
           e.stopPropagation();
           break;
         case 'U+0009':  // Tab
           if (!this.parentNode.alwaysFocusSinglePod)
             this.parentNode.focusPod();
         default:
           this.isActionBoxMenuActive = false;
           break;
       }
     },
 
     /**
+     * Handles a keydown event on menu title.
+     * @param {Event} e KeyDown event.
+     */
+    handleMenuTitleElementKeyDown_: function(e) {
+      if (this.disabled)
+        return;
+
+      if (e.keyIdentifier != 'U+0009' /* TAB */) {
+        this.handleActionAreaButtonKeyDown_(e);
+        return;
+      }
+
+      if (e.shiftKey == false) {
+        if (this.actionBoxMenuRemoveElement.hidden) {
+          this.isActionBoxMenuActive = false;
+        } else {
+          this.actionBoxMenuRemoveElement.tabIndex =
+              UserPodTabOrder.POD_MENU_ITEM;
+          this.actionBoxMenuRemoveElement.focus();
+          e.preventDefault();
+        }
+      } else {
+        this.isActionBoxMenuActive = false;
+        this.focusInput();
+        e.preventDefault();
+      }
+    },
+
+    /**
+     * Handles a blur event on menu title.
+     * @param {Event} e Blur event.
+     */
+    handleMenuTitleElementBlur_: function(e) {
+      if (this.disabled)
+        return;
+      this.actionBoxMenuTitleElement.tabIndex = -1;
+    },
+
+    /**
      * Handles a click event on remove user command.
      * @param {Event} e Click event.
      */
     handleRemoveCommandClick_: function(e) {
       if (this.user.legacySupervisedUser || this.user.isDesktopUser) {
         this.showRemoveWarning_();
         return;
       }
       if (this.isActionBoxMenuActive)
         chrome.send('removeUser', [this.user.username]);
@@ skipping 215 matching lines @@
             this.showRemoveWarning_();
           } else {
             this.removeUser(this.user);
           }
           e.stopPropagation();
           break;
         case 'Up':
         case 'Down':
           e.stopPropagation();
           break;
+        // Ignore these two, so ChromeVox hotkeys don't close the menu before
+        // they can navigate through it.
+        case 'Shift':
+        case 'Win':
+          break;
         case 'U+001B':  // Esc
           this.actionBoxAreaElement.focus();
           this.isActionBoxMenuActive = false;
           e.stopPropagation();
           break;
         default:
           this.actionBoxAreaElement.focus();
           this.isActionBoxMenuActive = false;
           break;
       }
@@ skipping 1700 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });