MD WebUI: Use arrow keys for navigation in cr-shared-menu, close on tab

ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js

 // Copyright 2016 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.
 
 /** Same as paper-menu-button's custom easing cubic-bezier param. */
 var SLIDE_CUBIC_BEZIER = 'cubic-bezier(0.3, 0.95, 0.5, 1)';
 
 Polymer({
   is: 'cr-shared-menu',
 
-  behaviors: [Polymer.IronA11yKeysBehavior],
-
   properties: {
     menuOpen: {
       type: Boolean,
       observer: 'menuOpenChanged_',
       value: false,
       notify: true,
     },
 
     /**
      * The contextual item that this menu was clicked for.
@@ skipping 46 matching lines @@
         return [{
           name: 'fade-out-animation',
           timing: {
             duration: 150
           }
         }];
       }
     }
   },
 
-  keyBindings: {
-    'tab': 'onTabPressed_',
-  },
-
   listeners: {
     'dropdown.iron-overlay-canceled': 'onOverlayCanceled_',
   },
 
   /**
    * The last anchor that was used to open a menu. It's necessary for toggling.
    * @private {?Element}
    */
   lastAnchor_: null,
 
   /**
    * The first focusable child in the menu's light DOM.
    * @private {?Element}
    */
   firstFocus_: null,
 
   /**
    * The last focusable child in the menu's light DOM.
    * @private {?Element}
    */
   lastFocus_: null,
 
   /** @override */
   attached: function() {
     window.addEventListener('resize', this.closeMenu.bind(this));
+    this.$.menu.addEventListener(
+        'keydown', this.onCaptureKeyDown_.bind(this), true);
   },
 
   /** Closes the menu. */
   closeMenu: function() {
     if (this.root.activeElement == null) {
       // Something else has taken focus away from the menu. Do not attempt to
       // restore focus to the button which opened the menu.
       this.$.dropdown.restoreFocusOnClose = false;
     }
     this.menuOpen = false;
   },
 
   /**
    * Opens the menu at the anchor location.
    * @param {!Element} anchor The location to display the menu.
    * @param {!Object} itemData The contextual item's data.
    */
   openMenu: function(anchor, itemData) {
     if (this.lastAnchor_ == anchor && this.menuOpen)
       return;
 
     if (this.menuOpen)
       this.closeMenu();
 
     this.itemData = itemData;
     this.lastAnchor_ = anchor;
     this.$.dropdown.restoreFocusOnClose = true;
-
-    var focusableChildren = Polymer.dom(this).querySelectorAll(
-        '[tabindex]:not([hidden]),button:not([hidden])');
-    if (focusableChildren.length > 0) {
-      this.$.dropdown.focusTarget = focusableChildren[0];
-      this.firstFocus_ = focusableChildren[0];
-      this.lastFocus_ = focusableChildren[focusableChildren.length - 1];
-    }
+    this.$.menu.selected = 0;
 
     // Move the menu to the anchor.
     this.$.dropdown.positionTarget = anchor;
     this.menuOpen = true;
   },
 
   /**
    * Toggles the menu for the anchor that is passed in.
    * @param {!Element} anchor The location to display the menu.
    * @param {!Object} itemData The contextual item's data.
    */
   toggleMenu: function(anchor, itemData) {
     if (anchor == this.lastAnchor_ && this.menuOpen)
       this.closeMenu();
     else
       this.openMenu(anchor, itemData);
   },
 
   /**
-   * Trap focus inside the menu. As a very basic heuristic, will wrap focus from
-   * the first element with a nonzero tabindex to the last such element.
-   * TODO(tsergeant): Use iron-focus-wrap-behavior once it is available
-   * (https://github.com/PolymerElements/iron-overlay-behavior/issues/179).
-   * @param {CustomEvent} e
+   * Close the menu when tab is pressed. Note that we must
+   * explicitly add a capture event listener to do this as iron-menu-behavior
+   * eats all key events during bubbling. See
+   * https://github.com/PolymerElements/iron-menu-behavior/issues/56.
+   * @private
    */
-  onTabPressed_: function(e) {
-    if (!this.firstFocus_ || !this.lastFocus_)
-      return;
-
-    var toFocus;
-    var keyEvent = e.detail.keyboardEvent;
-    if (keyEvent.shiftKey && keyEvent.target == this.firstFocus_)
-      toFocus = this.lastFocus_;
-    else if (keyEvent.target == this.lastFocus_)
-      toFocus = this.firstFocus_;
-
-    if (!toFocus)
-      return;
-
-    e.preventDefault();
-    toFocus.focus();
+  onCaptureKeyDown_: function(e) {
+    if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'tab')) {
+      this.closeMenu();
+      e.preventDefault();

[Dan Beam, 2016/08/23 05:50:40]

er, wat? so you want to stop tab from changing focus?

[tsergeant, 2016/08/23 07:08:40]

It's complicated. I probably should put a comment here. Basically, without the
preventDefault:

1. We close the menu
2. The focus change fires and focuses <body>, which is the element after the
<cr-shared-menu> in the tab order.
3. The menu asynchronously refocuses the menu button which opened it.

But for some reason, after number 3, even though document.activeElement
indicates that the menu button is focused, the document acts as if <body> is
focused.

This looks likely to be a bug deeply nestled in Blink somewhere. I haven't had a
chance to look into it yet.

Adding preventDefault cuts out #2 and refocuses the menu button correctly.

[Dan Beam, 2016/08/23 20:45:37]

don't we want focus to go to the next focusable thing instead of be restored to
the menu button?

+    }
   },
 
   /**
    * Ensure the menu is reset properly when it is closed by the dropdown (eg,
    * clicking outside).
    * @private
    */
   menuOpenChanged_: function() {
     if (!this.menuOpen) {
       this.itemData = null;
       this.lastAnchor_ = null;
     }
   },
 
   /**
    * Prevent focus restoring when tapping outside the menu. This stops the
    * focus moving around unexpectedly when closing the menu with the mouse.
    * @param {CustomEvent} e
    * @private
    */
   onOverlayCanceled_: function(e) {
     if (e.detail.type == 'tap')
       this.$.dropdown.restoreFocusOnClose = false;
   },
 });