WebUI: cr-action-menu, handle enter when no item has focus

In windows and mac, pressing enter closes the context menu. For linux,
pressing enter selects the first enabled menu item. This CL changes how
enter is handled for cr-action-menu to match the context menu behavior.

Bug: 867065
Change-Id: Ie2f716526c50e7bd88476bd846de587f94fb58f8
Reviewed-on: https://chromium-review.googlesource.com/c/1363853Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#614829}

chrome/test/data/webui/cr_elements/cr_action_menu_test.js

@@ -57,6 +57,10 @@ suite('CrActionMenu', function() {
     MockInteractions.keyDownOn(menu, 'ArrowUp', [], 'ArrowUp');
   }
 
+  function enter() {
+    MockInteractions.keyDownOn(menu, 'Enter', [], 'Enter');
+  }
+
   test('close event bubbles', function() {
     menu.showAt(dots);
     const whenFired = test_util.eventToPromise('close', menu);
@@ -121,6 +125,24 @@ suite('CrActionMenu', function() {
     assertEquals(items[items.length - 1], getDeepActiveElement());
   });
 
+  test('pressing enter when no focus', function() {
+    if (cr.isWindows || cr.isMac)
+      return testFocusAfterClosing('Enter');
+
+    // First item is selected
+    menu.showAt(dots);
+    assertEquals(menu, document.activeElement);
+    enter();
+    assertEquals(items[0], getDeepActiveElement());
+  });
+
+  test('pressing enter when when item has focus', function() {
+    menu.showAt(dots);
+    down();
+    enter();
+    assertEquals(items[0], getDeepActiveElement());
+  });
+
   test('can navigate to dynamically added items', function() {
     // Can modify children after attached() and before showAt().
     const item = document.createElement('button');

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

@@ -237,10 +237,27 @@ Polymer({
       return;
     }
 
-    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
+    let selectNext = e.key == 'ArrowDown';
+    if (e.key == 'Enter') {
+      // If a menu item has focus, don't change focus or close menu on 'Enter'.
+      const options = this.querySelectorAll('.dropdown-item');
+      let focusedIndex =
+          Array.prototype.indexOf.call(options, getDeepActiveElement());
+      if (focusedIndex != -1)
+        return;
+
+      if (cr.isWindows || cr.isMac) {
+        this.close();
+        e.preventDefault();
+        return;
+      }
+      selectNext = true;
+    }
+
+    if (e.key !== 'ArrowUp' && !selectNext)
       return;
 
-    const nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1);
+    const nextOption = this.getNextOption_(selectNext ? 1 : -1);
     if (nextOption) {
       if (!this.hasMousemoveListener_) {
         this.hasMousemoveListener_ = true;