refactor: drop custom keyboard events

packages/components/src/components/card-group/card-group.tsx

@@ -1,6 +1,6 @@
 import { PropertyValues } from "lit";
 import { createRef } from "lit/directives/ref.js";
-import { LitElement, property, createEvent, h, method, JsxNode, ToEvents } from "@arcgis/lumina";
+import { LitElement, property, createEvent, h, method, JsxNode } from "@arcgis/lumina";
 import { focusElementInGroup } from "../../utils/dom";
 import { Scale, SelectionMode } from "../interfaces";
 import type { Card } from "../card/card";
@@ -92,10 +92,7 @@ export class CardGroup extends LitElement {
 
   constructor() {
     super();
-    this.listen<ToEvents<Card>["calciteInternalCardKeyEvent"]>(
-      "calciteInternalCardKeyEvent",
-      this.calciteInternalCardKeyEventListener,
-    );
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteCardSelect", this.calciteCardSelectListener);
   }
 
@@ -121,29 +118,35 @@ export class CardGroup extends LitElement {
 
   //#region Private Methods
 
-  private calciteInternalCardKeyEventListener(event: CustomEvent<KeyboardEvent>): void {
-    if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
-      switch (event.detail["key"]) {
-        case "ArrowRight":
-          focusElementInGroup(interactiveItems, event.target as Card["el"], "next", true, false);
-          break;
-        case "ArrowLeft":
-          focusElementInGroup(
-            interactiveItems,
-            event.target as Card["el"],
-            "previous",
-            true,
-            false,
-          );
-          break;
-        case "Home":
-          focusElementInGroup(interactiveItems, event.target as Card["el"], "first", true, false);
-          break;
-        case "End":
-          focusElementInGroup(interactiveItems, event.target as Card["el"], "last", true, false);
-          break;
-      }
+  private keyDownHandler(event: KeyboardEvent): void {
+    if (this.disabled || !event.composedPath().includes(this.el)) {
+      return;
+    }
+
+    const card = this.items.find((item) => item === event.target);
+
+    if (!card || card.disabled || card.selectable) {
+      return;
+    }
+
+    const interactiveItems = this.items.filter((el) => !el.disabled);
+    switch (event.key) {
+      case "ArrowRight":
+        focusElementInGroup(interactiveItems, card, "next", true, false);
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        focusElementInGroup(interactiveItems, card, "previous", true, false);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusElementInGroup(interactiveItems, card, "first", true, false);
+        event.preventDefault();
+        break;
+      case "End":
+        focusElementInGroup(interactiveItems, card, "last", true, false);
+        event.preventDefault();
+        break;
     }
   }
 

packages/components/src/components/card/card.tsx

@@ -145,9 +145,6 @@ export class Card extends LitElement {
   /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */
   calciteCardSelect = createEvent({ cancelable: false });
 
-  /** @private */
-  calciteInternalCardKeyEvent = createEvent<KeyboardEvent>({ cancelable: false });
-
   //#endregion
 
   //#region Private Methods
@@ -181,16 +178,6 @@ export class Card extends LitElement {
       if (isActivationKey(event.key) && this.selectionMode !== "none") {
         this.calciteCardSelect.emit();
         event.preventDefault();
-      } else {
-        switch (event.key) {
-          case "ArrowRight":
-          case "ArrowLeft":
-          case "Home":
-          case "End":
-            this.calciteInternalCardKeyEvent.emit(event);
-            event.preventDefault();
-            break;
-        }
       }
     }
   }

packages/components/src/components/chip-group/chip-group.tsx

@@ -104,7 +104,7 @@ export class ChipGroup extends LitElement {
 
   constructor() {
     super();
-    this.listen("calciteInternalChipKeyEvent", this.calciteInternalChipKeyEventListener);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteChipClose", this.calciteChipCloseListener);
     this.listen("calciteChipSelect", this.calciteChipSelectListener);
     this.listen("calciteInternalChipSelect", this.calciteInternalChipSelectListener);
@@ -125,22 +125,29 @@ export class ChipGroup extends LitElement {
 
   //#region Private Methods
 
-  private calciteInternalChipKeyEventListener(event: CustomEvent): void {
-    if (event.composedPath().includes(this.el)) {
-      const destinationFromKey: Record<string, FocusElementInGroupDestination> = {
-        ArrowRight: "next",
-        ArrowLeft: "previous",
-        Home: "first",
-        End: "last",
-      };
-      const destination = destinationFromKey[event.detail.key];
-
-      if (destination) {
-        const interactiveItems = this.items?.filter((el) => !el.disabled);
-        focusElementInGroup(interactiveItems, event.detail.target, destination, true, true, true);
-      }
+  private keyDownHandler(event: KeyboardEvent): void {
+    const destinationFromKey: Record<string, FocusElementInGroupDestination> = {
+      ArrowRight: "next",
+      ArrowLeft: "previous",
+      Home: "first",
+      End: "last",
+    };
+    const destination = destinationFromKey[event.key];
+
+    if (!destination) {
+      return;
     }
-    event.stopPropagation();
+
+    const chip = event
+      .composedPath()
+      .find((el): el is Chip["el"] => el instanceof HTMLElement && el.matches("calcite-chip"));
+
+    if (!chip || !this.items?.includes(chip)) {
+      return;
+    }
+
+    const interactiveItems = this.items?.filter((el) => !el.disabled);
+    focusElementInGroup(interactiveItems, chip, destination, true, true, true);
   }
 
   private calciteChipCloseListener(event: CustomEvent): void {

packages/components/src/components/chip/chip.tsx

@@ -166,9 +166,6 @@ export class Chip extends LitElement {
   /** Fires when the selected state of the component changes. */
   calciteChipSelect = createEvent({ cancelable: false });
 
-  /** @private */
-  calciteInternalChipKeyEvent = createEvent<KeyboardEvent>({ cancelable: false });
-
   /** @private */
   calciteInternalChipSelect = createEvent({ cancelable: false });
 
@@ -237,7 +234,6 @@ export class Chip extends LitElement {
         case "ArrowLeft":
         case "Home":
         case "End":
-          this.calciteInternalChipKeyEvent.emit(event);
           event.preventDefault();
           break;
       }

packages/components/src/components/menu-item/interfaces.ts

@@ -1,9 +1 @@
-import type { MenuItem } from "./menu-item";
-
-export interface MenuItemCustomEvent {
-  event: KeyboardEvent;
-  children?: MenuItem["el"][];
-  isSubmenuOpen?: boolean;
-}
-
 export type Layout = "horizontal" | "vertical";

packages/components/src/components/menu-item/menu-item.tsx

@@ -18,7 +18,6 @@ import { useT9n } from "../../controllers/useT9n";
 import type { Action } from "../action/action";
 import { useSetFocus } from "../../controllers/useSetFocus";
 import { CSS, SLOTS, ICONS } from "./resources";
-import { MenuItemCustomEvent } from "./interfaces";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { styles } from "./menu-item.scss";
 
@@ -144,9 +143,6 @@ export class MenuItem extends LitElement {
 
   //#region Events
 
-  /** @private */
-  calciteInternalMenuItemKeyEvent = createEvent<MenuItemCustomEvent>();
-
   /** Emits when the component is selected. */
   calciteMenuItemSelect = createEvent();
 
@@ -219,7 +215,7 @@ export class MenuItem extends LitElement {
   }
 
   private async keyDownHandler(event: KeyboardEvent): Promise<void> {
-    const { hasSubmenu, href, layout, open, submenuItems } = this;
+    const { hasSubmenu, href, layout, open } = this;
     const key = event.key;
     const targetIsDropdown = event.target === this.dropdownActionRef.value;
 
@@ -240,39 +236,21 @@ export class MenuItem extends LitElement {
     } else if (key === "Escape") {
       if (open) {
         this.open = false;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({ event });
-      event.preventDefault();
     } else if (key === "ArrowDown" || key === "ArrowUp") {
-      event.preventDefault();
       if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "horizontal") {
         this.open = true;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: open && hasSubmenu,
-      });
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: true,
-      });
     } else if (key === "ArrowRight") {
-      event.preventDefault();
       if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "vertical") {
         this.open = true;
+        event.preventDefault();
         return;
       }
-      this.calciteInternalMenuItemKeyEvent.emit({
-        event,
-        children: submenuItems,
-        isSubmenuOpen: open && hasSubmenu,
-      });
     }
   }
 

packages/components/src/components/menu/menu.browser.e2e.tsx

@@ -1,6 +1,7 @@
 import { h } from "@arcgis/lumina";
-import { describe } from "vitest";
+import { describe, expect, it } from "vitest";
 import { mount } from "@arcgis/lumina-compiler/testing";
+import { userEvent } from "vitest/browser";
 import { focusable, hidden, renders, t9n, accessible } from "../../tests/commonTests/browser";
 
 describe("accessible", () => {
@@ -51,6 +52,27 @@ describe("focusable", () => {
   );
 });
 
+describe("keyboard navigation", () => {
+  it("bubbles native keydown events and only prevents handled keys", async () => {
+    const { el } = await mount<"calcite-menu">(
+      <calcite-menu>
+        <calcite-menu-item text="Parent" />
+      </calcite-menu>,
+    );
+    const item = el.querySelector("calcite-menu-item")!;
+    const keydownEvents: KeyboardEvent[] = [];
+
+    el.parentElement!.addEventListener("keydown", (event) => keydownEvents.push(event));
+    await item.setFocus();
+
+    await userEvent.keyboard("{ArrowRight}");
+    expect(keydownEvents.at(-1)?.defaultPrevented).toBe(true);
+
+    await userEvent.keyboard("a");
+    expect(keydownEvents.at(-1)?.defaultPrevented).toBe(false);
+  });
+});
+
 describe("translation support", () => {
   t9n(() => mount("calcite-menu"));
 });