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

chrome/test/data/webui/cr_elements/cr_shared_menu_tests.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.
 
 /** @fileoverview Suite of tests for cr-shared-menu. */
 suite('cr-shared-menu', function() {
   var menu;
 
   var button;
   var button2;
 
   var items = [];
 
   function afterOpen(callback) {
     menu.addEventListener('iron-overlay-opened', function f() {

[Dan Beam, 2016/09/29 03:22:59]

btw, listenOnce() is now a thing:

https://cs.chromium.org/chromium/src/ui/webui/resources/js/util.js?q=listenOn...

[tsergeant, 2016/09/29 06:59:56]

Neat, done.

       menu.removeEventListener('iron-overlay-opened', f);
-      callback();
+      // paper-listbox applies focus after opening with microtask timing.
+      // Delay until that has happened:
+      setTimeout(callback, 0);
     });
   }
 
   function afterClose(callback) {
     menu.addEventListener('iron-overlay-closed', function f() {
       menu.removeEventListener('iron-overlay-closed', f);
       callback();
     });
   }
 
@@ skipping 111 matching lines @@
         input.focus();
         menu.closeMenu();
 
         afterClose(function() {
           assertEquals(input, document.activeElement);
           done();
         });
       });
     });
 
-    test('focus is trapped inside the menu', function(done) {
+    test('tab closes menu', function(done) {
       button.focus();
       MockInteractions.tap(button);
 
       afterOpen(function() {
-        // Simulate shift-tab on first element.
-        assertEquals(items[0], menu.shadowRoot.activeElement);
+        MockInteractions.pressAndReleaseKeyOn(items[0], 9);
+        afterClose(function() {
+          // Focus should move to a different element, but we can't simulate
+          // the right events to test this.
+          done();
+        });
+      });
+    });
+
+    test('shift-tab closes menu', function(done) {
+      button.focus();
+      MockInteractions.tap(button);
+
+      afterOpen(function() {
         MockInteractions.pressAndReleaseKeyOn(items[0], 9, ['shift']);
-        assertEquals(items[2], menu.shadowRoot.activeElement);
+        afterClose(done);
+      });
+    });
 
-        // Simulate tab on last element.
-        MockInteractions.pressAndReleaseKeyOn(items[2], 9);
-        assertEquals(items[0], menu.shadowRoot.activeElement);
+    test('up and down change focus', function(done) {
+      button.focus();
+      MockInteractions.tap(button);
 
-        // Simulate shift-tab on first element.
-        assertEquals(items[0], menu.shadowRoot.activeElement);
-        MockInteractions.pressAndReleaseKeyOn(items[0], 9, ['shift']);
-        assertEquals(items[2], menu.shadowRoot.activeElement);
+      afterOpen(function() {
+        // Pressing down on first item goes to second item.
+        assertEquals(items[0], document.activeElement);
+        MockInteractions.pressAndReleaseKeyOn(items[0], 40);
+        assertEquals(items[1], document.activeElement);
 
-        // Simulate shift-tab on last element. This should simply cause the
-        // browser to focus the previous item in the tab order, since
-        // cr-shared-menu should not wrap in this case. However, we can't mimic
-        // native events from JS, so the focus won't actually move unless
-        // cr-shared--menu misbehaves.
-        MockInteractions.pressAndReleaseKeyOn(items[2], 9, ['shift']);
-        assertEquals(items[2], menu.shadowRoot.activeElement);
+        // Pressing down twice more cycles back to first item.
+        MockInteractions.pressAndReleaseKeyOn(items[1], 40);
+        MockInteractions.pressAndReleaseKeyOn(items[2], 40);
+        assertEquals(items[0], document.activeElement);
+
+        // Pressing up cycles to last item.
+        MockInteractions.pressAndReleaseKeyOn(items[0], 38);
+        assertEquals(items[2], document.activeElement);
 
         done();
       });
     });
   });
 
   suite('different item types', function() {
     setup(function() {
       // Populate the menu with tabbable and untabbable items.
       items[0] = document.createElement('paper-item');
       items[0].disabled = true;
       menu.appendChild(items[0]);
 
       items[1] = document.createElement('paper-item');
       menu.appendChild(items[1]);
 
       items[2] = document.createElement('button');
       menu.appendChild(items[2]);
 
       items[3] = document.createElement('button');
       items[3].disabled = true;
+      menu.appendChild(items[3]);
 
       items[4] = document.createElement('paper-item');
       items[4].hidden = true;
       menu.appendChild(items[4]);
     });
 
     test('focus does not start/end with untabbable elements', function(done) {
       button.focus();
       MockInteractions.tap(button);
 
       afterOpen(function() {
         // The first item is disabled, so the second item is the first tabbable
         // item and should be focusced.
         assertEquals(items[1], menu.shadowRoot.activeElement);
 
         // The last two items are disabled or hidden, so they should be skipped
-        // too.
-        MockInteractions.pressAndReleaseKeyOn(items[1], 9, ['shift']);
+        // when pressing up.
+        MockInteractions.pressAndReleaseKeyOn(items[1], 38);
         assertEquals(items[2], menu.shadowRoot.activeElement);
 
-        // Simulate tab on last tabbable element to wrap to the first tabbable
-        // element again.
-        MockInteractions.pressAndReleaseKeyOn(items[2], 9);
+        // Simulate pressing down on last focusable element to wrap to first
+        // focusable element.
+        MockInteractions.pressAndReleaseKeyOn(items[2], 40);
         assertEquals(items[1], menu.shadowRoot.activeElement);
 
         done();
       });
     });
   });
 });