@kinetixui/ui 0.23.3 → 0.24.0

package/src/components-keyboard.test.tsx

@@ -1,8 +1,24 @@
 import * as React from "react";
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./components/alert-dialog";
 import { Checkbox } from "./components/checkbox";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "./components/context-menu";
 import { ColorPicker } from "./components/color-picker";
 import { FileUpload } from "./components/file-upload";
 import { List, ListItem } from "./components/list";
@@ -21,12 +37,22 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "./components/dropdown-menu";
+import { Input } from "./components/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "./components/input-otp";
+import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "./components/menubar";
+import { Modal } from "./components/modal";
 import { MultiSelect } from "./components/multi-select";
 import { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/select";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./components/sheet";
 import { Slider } from "./components/slider";
 import { Switch } from "./components/switch";
+import { Toggle } from "./components/toggle";
+import { ToggleGroup, ToggleGroupItem } from "./components/toggle-group";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs";
+import { Textarea } from "./components/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip";
 import { Tour } from "./components/tour";
 import { TreeItem, TreeView } from "./components/tree-view";
 
@@ -40,6 +66,75 @@ import { TreeItem, TreeView } from "./components/tree-view";
 
 // kx-verify: interaction
 
+beforeAll(() => {
+  // `input-otp` tracks which slot the caret is in by polling document.elementFromPoint, which jsdom
+  // does not implement. Unstubbed it throws from a timer after the test has finished — an unhandled
+  // rejection that vitest reports against whichever test happened to be running.
+  (document as unknown as { elementFromPoint: () => Element | null }).elementFromPoint = () => null;
+});
+
+/**
+ * First in this module, deliberately.
+ *
+ * Radix's anchored ContextMenu stops opening once any modal overlay has mounted and unmounted in the
+ * same jsdom module: the trigger stays `data-state="closed"` and no `contextmenu` event, with or without
+ * coordinates, revives it — nor does Shift+F10. Measured against Dialog, Sheet and Drawer alike, and the
+ * reason `components-rtl.test.tsx` can open one is that it opens it first too. The state lives inside the
+ * primitive, not in anything this repository sets: clearing the body and documentElement style attributes
+ * that vaul leaves behind changes nothing.
+ *
+ * So the ordering is a real constraint rather than a preference, and `openContextMenu` below fails with
+ * that sentence rather than with a bare "unable to find role=menu" if someone moves this suite down.
+ */
+describe("ContextMenu", () => {
+  function Example() {
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>Back</ContextMenuItem>
+          <ContextMenuItem>Forward</ContextMenuItem>
+          <ContextMenuItem>Reload</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  }
+
+  async function openContextMenu() {
+    fireEvent.contextMenu(screen.getByText("Right-click here"));
+    try {
+      return await screen.findByRole("menu");
+    } catch {
+      throw new Error(
+        "ContextMenu did not open. This suite must run before any modal overlay in this module — Radix's " +
+          "anchored menu does not recover once one has mounted here. Move this describe back to the top.",
+      );
+    }
+  }
+
+  it("walks items with the arrows, jumps with Home and End, finds one by typing, and closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    // One open, many assertions — the same trade components-rtl.test.tsx records for this component:
+    // Radix's ContextMenu is modal, and a second open in the same module never arrives, so a test per
+    // key would be testing the harness rather than the menu.
+    await openContextMenu();
+
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getByRole("menuitem", { name: "Back" })).toHaveFocus();
+    await user.keyboard("{End}");
+    expect(screen.getByRole("menuitem", { name: "Reload" })).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(screen.getByRole("menuitem", { name: "Back" })).toHaveFocus();
+    // Typeahead: one letter is a jump, not a filter — the menu keeps every item.
+    await user.keyboard("f");
+    expect(screen.getByRole("menuitem", { name: "Forward" })).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+  });
+});
+
 describe("Dialog", () => {
   function Example() {
     return (
@@ -365,6 +460,20 @@ describe("MultiSelect", () => {
     await waitFor(() => expect(screen.getAllByText("Banana").length).toBeGreaterThan(1));
   });
 
+  it("opens with a vertical arrow key as well as with Enter", async () => {
+    const user = userEvent.setup();
+    render(<MultiSelect aria-label="Fruit" options={options} />);
+    await user.tab();
+    const combobox = screen.getByRole("combobox");
+    expect(combobox).toHaveAttribute("aria-expanded", "false");
+    // WAI-ARIA's combobox pattern lists Down Arrow as a way to open the popup, and it is what a
+    // keyboard user reaches for first. Before this it did nothing at all: Enter and Space were the
+    // only way in.
+    await user.keyboard("{ArrowDown}");
+    expect(combobox).toHaveAttribute("aria-expanded", "true");
+    await screen.findByPlaceholderText("Search…");
+  });
+
   it("closes with Escape and gives focus back to the combobox", async () => {
     const user = userEvent.setup();
     render(<MultiSelect aria-label="Fruit" options={options} />);
@@ -1049,6 +1158,25 @@ describe("Slider", () => {
     await user.keyboard("{End}");
     expect(onValueChange).toHaveBeenLastCalledWith([100]);
   });
+
+  it("steps by a page with PageUp and PageDown, and clamps at the ends of the range", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Slider aria-label="Volume" defaultValue={[50]} max={100} onValueChange={onValueChange} />);
+    await user.tab();
+    await user.keyboard("{PageUp}");
+    expect(onValueChange).toHaveBeenLastCalledWith([60]);
+    await user.keyboard("{PageDown}");
+    expect(onValueChange).toHaveBeenLastCalledWith([50]);
+
+    await user.keyboard("{End}");
+    onValueChange.mockClear();
+    // At the maximum the thumb has nowhere to go: the key is accepted and reports nothing, rather
+    // than wrapping round to the minimum.
+    await user.keyboard("{ArrowUp}");
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("slider", { name: "Volume" })).toHaveAttribute("aria-valuenow", "100");
+  });
 });
 
 describe("MultiSelect chips", () => {
@@ -1110,3 +1238,415 @@ describe("FileUpload", () => {
     expect(screen.getByRole("button", { name: "after" })).toHaveFocus();
   });
 });
+
+// kx-verify: interaction
+
+/**
+ * Toggle and ToggleGroup had no interaction or keyboard evidence at all — the only two members of the
+ * selection-control family without any, which is how they came to be in this slice. What they support is
+ * asserted here rather than assumed from the family: a Toggle is a button, so it answers to both Space and
+ * Enter, where a Checkbox answers only to Space.
+ */
+describe("Toggle", () => {
+  it("toggles with Space and with Enter, and reports state through aria-pressed", async () => {
+    const user = userEvent.setup();
+    render(<Toggle aria-label="Bold" />);
+    await user.tab();
+    const toggle = screen.getByRole("button", { name: "Bold" });
+    expect(toggle).toHaveFocus();
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+
+    // A button, not a checkbox: Enter activates it too.
+    await user.keyboard("{Enter}");
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await user.keyboard(" ");
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("a disabled Toggle is skipped by Tab and does not respond to keys", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <button>first</button>
+        <Toggle aria-label="Bold" disabled />
+        <button>last</button>
+      </>,
+    );
+    await user.tab();
+    await user.tab();
+    expect(screen.getByRole("button", { name: "last" })).toHaveFocus();
+    expect(screen.getByRole("button", { name: "Bold" })).toHaveAttribute("aria-pressed", "false");
+  });
+});
+
+describe("ToggleGroup", () => {
+  function Example({ type = "multiple" as "multiple" | "single" }) {
+    return (
+      <>
+        <button>before</button>
+        <ToggleGroup type={type as never} aria-label="Formatting">
+          <ToggleGroupItem value="bold" aria-label="Bold" />
+          <ToggleGroupItem value="italic" aria-label="Italic" />
+          <ToggleGroupItem value="underline" aria-label="Underline" />
+        </ToggleGroup>
+      </>
+    );
+  }
+
+  it("is one tab stop, and the arrow keys move between items", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.tab(); // before
+    await user.tab(); // into the group, landing on the first item
+    expect(screen.getByRole("button", { name: "Bold" })).toHaveFocus();
+
+    await user.keyboard("{ArrowRight}");
+    expect(screen.getByRole("button", { name: "Italic" })).toHaveFocus();
+    await user.keyboard("{ArrowRight}");
+    expect(screen.getByRole("button", { name: "Underline" })).toHaveFocus();
+    await user.keyboard("{ArrowLeft}");
+    expect(screen.getByRole("button", { name: "Italic" })).toHaveFocus();
+
+    // A roving tabindex: Tab leaves the group rather than walking the rest of its items.
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Italic" })).not.toHaveFocus();
+  });
+
+  it("in multiple mode, Space presses items independently", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.tab();
+    await user.tab();
+    await user.keyboard(" ");
+    expect(screen.getByRole("button", { name: "Bold" })).toHaveAttribute("aria-pressed", "true");
+
+    await user.keyboard("{ArrowRight}");
+    await user.keyboard(" ");
+    // Both stay pressed — that is what multiple means, and what single must not do.
+    expect(screen.getByRole("button", { name: "Bold" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Italic" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("in single mode, pressing one item releases the other", async () => {
+    const user = userEvent.setup();
+    render(<Example type="single" />);
+    await user.tab();
+    await user.tab();
+    await user.keyboard(" ");
+    expect(screen.getByRole("radio", { name: "Bold" })).toHaveAttribute("aria-checked", "true");
+
+    await user.keyboard("{ArrowRight}");
+    await user.keyboard(" ");
+    expect(screen.getByRole("radio", { name: "Italic" })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Bold" })).toHaveAttribute("aria-checked", "false");
+  });
+});
+
+describe("Input and Textarea", () => {
+  it("are reached in source order by Tab and skipped when disabled", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <Input aria-label="First" />
+        <Input aria-label="Skipped" disabled />
+        <Textarea aria-label="Second" />
+      </>,
+    );
+    await user.tab();
+    expect(screen.getByLabelText("First")).toHaveFocus();
+    await user.tab();
+    // The disabled field is not a stop, so one Tab goes straight past it to the textarea.
+    expect(screen.getByLabelText("Second")).toHaveFocus();
+    await user.tab({ shift: true });
+    expect(screen.getByLabelText("First")).toHaveFocus();
+  });
+
+  it("stay focusable and readable when read-only, and reject typing", async () => {
+    const user = userEvent.setup();
+    render(<Input aria-label="Reference" readOnly defaultValue="KX-1024" />);
+    const field = screen.getByLabelText("Reference") as HTMLInputElement;
+    await user.tab();
+    // Read-only is not disabled: it must still be reachable, or the value cannot be read or copied.
+    expect(field).toHaveFocus();
+    await user.keyboard("x");
+    expect(field.value).toBe("KX-1024");
+  });
+});
+
+describe("Select", () => {
+  function Example({ onValueChange }: { onValueChange?: (v: string) => void } = {}) {
+    return (
+      <Select onValueChange={onValueChange}>
+        <SelectTrigger aria-label="Fruit">
+          <SelectValue placeholder="Pick one" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  it("opens with Enter, walks options with the arrow keys and Home/End, and commits with Enter", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Example onValueChange={onValueChange} />);
+    await user.tab();
+    expect(screen.getByRole("combobox", { name: "Fruit" })).toHaveFocus();
+    await user.keyboard("{Enter}");
+    await screen.findByRole("listbox");
+
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{End}");
+    expect(screen.getByRole("option", { name: "Cherry" })).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(screen.getByRole("option", { name: "Apple" })).toHaveFocus();
+    await user.keyboard("{Enter}");
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith("apple");
+  });
+
+  it("jumps to an option by typing its first letter", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.tab();
+    await user.keyboard("{Enter}");
+    await screen.findByRole("listbox");
+    await user.keyboard("c");
+    expect(screen.getByRole("option", { name: "Cherry" })).toHaveFocus();
+  });
+
+  it("closes with Escape without choosing, and hands focus back to the trigger", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Example onValueChange={onValueChange} />);
+    await user.tab();
+    await user.keyboard("{Enter}");
+    await screen.findByRole("listbox");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("combobox", { name: "Fruit" })).toHaveFocus();
+  });
+});
+
+describe("InputOTP", () => {
+  function Example({ onChange }: { onChange?: (v: string) => void } = {}) {
+    return (
+      <InputOTP maxLength={4} onChange={onChange} aria-label="One-time code">
+        <InputOTPGroup>
+          {[0, 1, 2, 3].map((i) => (
+            <InputOTPSlot key={i} index={i} data-testid={`slot-${i}`} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    );
+  }
+  const chars = () => [0, 1, 2, 3].map((i) => screen.getByTestId(`slot-${i}`).textContent);
+  /** The slot the caret is in is marked active (and carries the focus ring); there is one real input behind all four. */
+  const caretAt = () => [0, 1, 2, 3].findIndex((i) => screen.getByTestId(`slot-${i}`).hasAttribute("data-active"));
+
+  it("fills one slot per keystroke and advances the caret", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Example onChange={onChange} />);
+    await user.tab();
+    expect(screen.getByRole("textbox", { name: "One-time code" })).toHaveFocus();
+    expect(caretAt()).toBe(0);
+
+    await user.keyboard("12");
+    expect(chars()).toEqual(["1", "2", "", ""]);
+    expect(caretAt()).toBe(2);
+    expect(onChange).toHaveBeenLastCalledWith("12");
+  });
+
+  it("clears the last filled slot on Backspace and steps the caret back", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.tab();
+    await user.keyboard("123");
+    await user.keyboard("{Backspace}");
+    expect(chars()).toEqual(["1", "2", "", ""]);
+    expect(caretAt()).toBe(2);
+  });
+
+  it("accepts a pasted code into every slot at once", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Example onChange={onChange} />);
+    await user.click(screen.getByRole("textbox", { name: "One-time code" }));
+    await user.paste("4321");
+    expect(chars()).toEqual(["4", "3", "2", "1"]);
+    expect(onChange).toHaveBeenLastCalledWith("4321");
+  });
+});
+
+describe("AlertDialog", () => {
+  function Example() {
+    return (
+      <AlertDialog>
+        <AlertDialogTrigger>Delete account</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  }
+
+  it("opens with Enter and puts focus on the safe action, not the destructive one", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    screen.getByRole("button", { name: "Delete account" }).focus();
+    await user.keyboard("{Enter}");
+
+    const alert = await screen.findByRole("alertdialog", { name: "Are you absolutely sure?" });
+    expect(alert).toHaveAccessibleDescription("This action cannot be undone.");
+    // The whole point of an alert dialog: the key that opened it must not also confirm it. Focus lands
+    // on Cancel, so a second Enter dismisses rather than deletes.
+    await waitFor(() => expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus());
+  });
+
+  it("closes on Escape and returns focus to the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    const trigger = screen.getByRole("button", { name: "Delete account" });
+    await user.click(trigger);
+    await screen.findByRole("alertdialog");
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe("Sheet", () => {
+  function Example() {
+    return (
+      <Sheet>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Make changes here.</SheetDescription>
+          <button>Save</button>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  it("traps Tab inside the panel and closes on Escape, returning focus", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    const trigger = screen.getByRole("button", { name: "Open" });
+    await user.click(trigger);
+    const panel = await screen.findByRole("dialog", { name: "Edit profile" });
+    expect(panel.contains(document.activeElement)).toBe(true);
+
+    for (let i = 0; i < 6; i++) {
+      await user.tab();
+      expect(panel.contains(document.activeElement)).toBe(true);
+    }
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe("Modal", () => {
+  it("opens from the keyboard, names itself, and closes on Escape without taking the action", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    const onCancel = vi.fn();
+    render(
+      <Modal
+        type="Destructive"
+        title="Delete this item"
+        description="This cannot be undone."
+        trigger={<button>Delete</button>}
+        onAction={onAction}
+        onCancel={onCancel}
+      />,
+    );
+    const trigger = screen.getByRole("button", { name: "Delete" });
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    const dialog = await screen.findByRole("dialog", { name: "Delete this item" });
+    expect(dialog.contains(document.activeElement)).toBe(true);
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+    // Escape is a dismissal, not a decision: neither handler runs. A consumer who needs to know the
+    // modal closed listens to `onOpenChange`, which is what that prop is for.
+    expect(onAction).not.toHaveBeenCalled();
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+});
+
+describe("Tooltip", () => {
+  it("appears on keyboard focus and describes its trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Library</TooltipTrigger>
+          <TooltipContent>Add to library</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    await user.tab();
+    const trigger = screen.getByRole("button", { name: /Library/ });
+    expect(trigger).toHaveFocus();
+
+    // Not modal, and it must not become keyboard-inaccessible for that reason: focus alone shows it,
+    // and the trigger points at it with aria-describedby so it is announced rather than merely drawn.
+    await waitFor(() => expect(screen.getByRole("tooltip")).toBeInTheDocument());
+    expect(trigger).toHaveAccessibleDescription("Add to library");
+  });
+});
+
+describe("Menubar", () => {
+  function Example() {
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New Tab</MenubarItem>
+            <MenubarItem>New Window</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Undo</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    );
+  }
+
+  it("opens a menu with Enter, moves into its items, and closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    const file = screen.getByRole("menuitem", { name: "File" });
+    file.focus();
+    await user.keyboard("{Enter}");
+
+    await screen.findByRole("menu");
+    await waitFor(() => expect(screen.getByRole("menuitem", { name: "New Tab" })).toHaveFocus());
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getByRole("menuitem", { name: "New Window" })).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+  });
+});