[issues] Make sure Enter/Space trigger button clicks.

This reverts the previous CL (https://crrev.com/c/5939709), which
switched the logic from 'keydown' to 'keyup', and instead makes
sure that the buttons don't propagate 'keydown' events up to their
parents, but instead handle these as clicks themselves.

This matches the behavior of the treeview examples in the WAI-ARIA
pattern guidelines[^1].

[^1]: https://www.w3.org/WAI/ARIA/apg/patterns/

Fixed: 373168872
Change-Id: Ie988c674cd10e93a7c4cef91acc203936061f65e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5968396
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: bmeurer

front_end/panels/issues/components/HideIssuesMenu.ts

@@ -43,9 +43,9 @@ export class HideIssuesMenu extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
   }
 
-  onMenuOpen(event: Event): void {
+  onMenuOpen(event: MouseEvent): void {
     event.stopPropagation();
-    const buttonElement = this.#shadow.querySelector('button');
+    const buttonElement = this.#shadow.querySelector('devtools-button');
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
       x: buttonElement?.getBoundingClientRect().left,
       y: buttonElement?.getBoundingClientRect().bottom,
@@ -55,6 +55,14 @@ export class HideIssuesMenu extends HTMLElement {
     void contextMenu.show();
   }
 
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === 'Space') {
+      // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
+      // so that these get turned into 'click' events properly.
+      event.stopImmediatePropagation();
+    }
+  }
+
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -63,7 +71,8 @@ export class HideIssuesMenu extends HTMLElement {
       .data=${{variant: Buttons.Button.Variant.ICON,iconName: 'dots-vertical', title: i18nString(UIStrings.tooltipTitle)} as Buttons.Button.ButtonData}
       .jslogContext=${'hide-issues'}
       class="hide-issues-menu-btn"
-      @click=${this.onMenuOpen.bind(this)}></devtools-button>
+      @click=${this.onMenuOpen}
+      @keydown=${this.onKeydown}></devtools-button>
     `, this.#shadow, {host: this});
   }
 }

front_end/testing/DOMHelpers.ts

@@ -163,17 +163,6 @@ 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 {dispatchKeyUpEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {dispatchKeyDownEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 
 import * as UI from './legacy.js';
 
@@ -18,7 +18,7 @@ describe('TreeOutline', () => {
       tree.appendChild(parent);
       parent.select();
 
-      dispatchKeyUpEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
+      dispatchKeyDownEvent(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();
 
-      dispatchKeyUpEvent(tree.contentElement, {bubbles: true, key: 'Enter'});
+      dispatchKeyDownEvent(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('keyup', {bubbles: true, cancelable: true, key}));
+      deepActiveElement!.dispatchEvent(new KeyboardEvent('keydown', {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('keyup', this.treeKeyUp.bind(this), false);
+    this.contentElement.addEventListener('keydown', this.treeKeyDown.bind(this), false);
 
     this.preventTabOrder = false;
     this.showSelectionOnKeyboardFocus = false;
@@ -293,7 +293,7 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return true;
   }
 
-  private treeKeyUp(event: KeyboardEvent): void {
+  private treeKeyDown(event: KeyboardEvent): void {
     if (event.shiftKey || event.metaKey || event.ctrlKey || isEditing()) {
       return;
     }

front_end/ui/legacy/UIUtils.ts

@@ -1100,6 +1100,13 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);
+    button.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' || event.key === 'Space') {
+        // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
+        // so that these get turned into 'click' events properly.
+        event.stopImmediatePropagation();
+      }
+    });
   }
   if (opts?.jslogContext) {
     button.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(opts.jslogContext)}`);