[ui] Make TreeOutline listen to "keyup" instead of "keydown".

The primary motivation for this is to allow the processing of "click"
events generated from "Enter" key presses in elements within a
TreeOutline. Before this CL, the "keydown" handler in the TreeOutline
would always consume the "Enter" key before the child element gets a
chance to turn that into a "click" event.

There's a secondary reason however, which is that up-events should be
preferred for accessibility reasons, see [^1] which describes this in
the context of so-called pointer device buttons, but the same applies
to keyboards as well.

[^1]: https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation

Fixed: 373168872
Change-Id: I3b82e1fde221383279ee6a690af3e436fcc98033
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5939709
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Changhao Han <[email protected]>

Author: bmeurer

front_end/testing/DOMHelpers.ts

@@ -163,6 +163,17 @@ export function dispatchKeyDownEvent<T extends Element>(element: T, options: Key
   }
 }
 
+/**
+ * Dispatches a keyup event. Errors if the event was not dispatched successfully.
+ */
+export function dispatchKeyUpEvent<T extends Element>(element: T, options: KeyboardEventInit = {}) {
+  const clickEvent = new KeyboardEvent('keyup', options);
+  const success = element.dispatchEvent(clickEvent);
+  if (!success) {
+    assert.fail('Failed to trigger keydown event successfully.');
+  }
+}
+
 export function dispatchInputEvent<T extends Element>(element: T, options: InputEventInit = {}) {
   const inputEvent = new InputEvent('input', options);
   element.dispatchEvent(inputEvent);

front_end/ui/legacy/Treeoutline.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../core/platform/platform.js';
-import {dispatchKeyDownEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {dispatchKeyUpEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 
 import * as UI from './legacy.js';
 
@@ -18,7 +18,7 @@ describe('TreeOutline', () => {
       tree.appendChild(parent);
       parent.select();
 
-      dispatchKeyDownEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
+      dispatchKeyUpEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
       assert.isTrue(parent.expanded, 'Enter key was supposed to expand the parent node');
     });
 
@@ -32,7 +32,7 @@ describe('TreeOutline', () => {
       parent.select();
       parent.expand();
 
-      dispatchKeyDownEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
+      dispatchKeyUpEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
       assert.isFalse(parent.expanded, 'Enter key was supposed to collapse the parent node');
     });
   });
@@ -106,7 +106,7 @@ describe('TreeOutline', () => {
 
     function sendKey(key: string) {
       const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document);
-      deepActiveElement!.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key}));
+      deepActiveElement!.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true, cancelable: true, key}));
     }
   });
 });

front_end/ui/legacy/Treeoutline.ts

@@ -97,7 +97,7 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.comparator = null;
 
     this.contentElement = this.rootElementInternal.childrenListNode;
-    this.contentElement.addEventListener('keydown', this.treeKeyDown.bind(this), false);
+    this.contentElement.addEventListener('keyup', this.treeKeyUp.bind(this), false);
 
     this.preventTabOrder = false;
     this.showSelectionOnKeyboardFocus = false;
@@ -293,7 +293,7 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return true;
   }
 
-  private treeKeyDown(event: KeyboardEvent): void {
+  private treeKeyUp(event: KeyboardEvent): void {
     if (event.shiftKey || event.metaKey || event.ctrlKey || isEditing()) {
       return;
     }