Chromium Code Reviews Chromium Code Reviews
Issue 2272553002:
MD WebUI: Use arrow keys for navigation in cr-shared-menu, close on tab (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js |
| diff --git a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js |
| index 2b2706582b3ad8a4aa09d176fcdcadda1114fc66..962daeee48d1d5045ff65898657b3afc49d455e7 100644 |
| --- a/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js |
| +++ b/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js |
| @@ -8,8 +8,6 @@ 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, |
| @@ -76,10 +74,6 @@ Polymer({ |
| } |
| }, |
| - keyBindings: { |
| - 'tab': 'onTabPressed_', |
| - }, |
| - |
| listeners: { |
| 'dropdown.iron-overlay-canceled': 'onOverlayCanceled_', |
| }, |
| @@ -105,6 +99,8 @@ Polymer({ |
| /** @override */ |
| attached: function() { |
| window.addEventListener('resize', this.closeMenu.bind(this)); |
| + this.$.menu.addEventListener( |
| + 'keydown', this.onCaptureKeyDown_.bind(this), true); |
| }, |
| /** Closes the menu. */ |
| @@ -132,14 +128,7 @@ Polymer({ |
| 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; |
| @@ -159,28 +148,17 @@ Polymer({ |
| }, |
| /** |
| - * 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 foc
tsergeant
2016/08/23 07:08:40
It's complicated. I probably should put a comment
Dan Beam
2016/08/23 20:45:37
don't we want focus to go to the next focusable th
|
| + } |
| }, |
| /** |
