@primitiv-ui/react 0.1.27 → 0.1.29

package/src/NavigationMenu/__tests__/NavigationMenu.keyboard-interaction.test.tsx

@@ -0,0 +1,294 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DeadEndNav, ThreeEntryNav } from "./NavigationMenu.fixtures";
+
+describe("NavigationMenu — keyboard interaction", () => {
+  it("toggles a panel with Enter on its trigger", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("toggles a panel with Space on its trigger", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard(" ");
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("opens the panel and moves focus into it on ArrowDown when horizontal", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+  });
+
+  it("moves focus into an already-open panel on ArrowDown", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{ArrowDown}");
+
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+  });
+
+  it("uses ArrowRight to enter the panel when vertical", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav orientation="vertical" />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{ArrowRight}");
+
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+  });
+
+  it("uses ArrowLeft to enter the panel when vertical and rtl", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav orientation="vertical" dir="rtl" />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{ArrowLeft}");
+
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+  });
+
+  it("closes on Escape and returns focus to the trigger", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    screen.getByRole("link", { name: "Tokens" }).focus();
+    await user.keyboard("{Escape}");
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+    expect(screen.getByRole("button", { name: "Concepts" })).toHaveFocus();
+  });
+
+  it("leaves focus alone when Escape is pressed with nothing open", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    const changelog = screen.getByRole("link", { name: "Changelog" });
+    changelog.focus();
+    await user.keyboard("{Escape}");
+
+    expect(changelog).toHaveFocus();
+  });
+
+  it("does nothing on an unhandled key", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    trigger.focus();
+    await user.keyboard("a");
+
+    expect(trigger).toHaveFocus();
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("ignores the enter-panel key on an entry with no panel", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    const changelog = screen.getByRole("link", { name: "Changelog" });
+    changelog.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(changelog).toHaveFocus();
+  });
+
+  it("moves focus into a panel it opened by click, on the enter-panel arrow", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+    await user.keyboard("{ArrowDown}");
+
+    // The panel is open by the time the arrow lands, so the arrow has to read
+    // the live open state — an open value captured at mount takes the wrong
+    // branch and never focuses anything.
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+  });
+
+  it("keeps the panel open while tabbing across its own entries", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.tab(); // Tokens
+    await user.tab(); // Themes
+    await user.tab(); // Changelog
+    await user.tab(); // Registry & CLI
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("closes an open panel when Tab moves focus into a separate NavigationMenu instance", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <ThreeEntryNav defaultValue="concepts" aria-label="First" />
+        <ThreeEntryNav aria-label="Second" />
+      </>,
+    );
+
+    const [firstNav, secondNav] = screen.getAllByRole("navigation");
+    within(firstNav)
+      .getByRole("button", { name: "Registry & CLI" })
+      .focus();
+    await user.tab();
+
+    expect(
+      within(secondNav).getByRole("button", { name: "Concepts" }),
+    ).toHaveFocus();
+    expect(within(firstNav).getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("leaves Home and End to the browser inside an open panel", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    const tokens = screen.getByRole("link", { name: "Tokens" });
+    tokens.focus();
+    await user.keyboard("{Home}");
+
+    // A panel link is reached by Tab, not by the top-level order — so Home must
+    // not jump out of the panel onto the first trigger.
+    expect(tokens).toHaveFocus();
+  });
+});
+
+/**
+ * Focus only enters a panel when the enter-panel arrow asked for it. The
+ * mechanism is a pending flag spent by an effect, and every way of opening a
+ * panel runs that effect — so each of these proves an open that *didn't* come
+ * from the arrow leaves focus where the user put it.
+ */
+describe("NavigationMenu — unsolicited panel focus", () => {
+  it("does not move focus into a panel opened by defaultValue", () => {
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+    expect(document.body).toHaveFocus();
+  });
+
+  it("keeps focus on the trigger when a click opens the panel", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    await user.click(trigger);
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("does not replay the arrow's intent on the next open", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+    await user.keyboard("{Escape}");
+    await user.click(trigger);
+
+    // The arrow's intent was spent on the first open; a second open by click
+    // must not inherit it.
+    expect(trigger).toHaveFocus();
+  });
+
+  it("does not replay the intent after entering an already-open panel", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+    await waitFor(() =>
+      expect(screen.getByRole("link", { name: "Tokens" })).toHaveFocus(),
+    );
+    await user.keyboard("{Escape}");
+    await user.click(trigger);
+
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe("NavigationMenu — enter-panel arrow with nothing to focus", () => {
+  it("opens an entry that has no panel at all", async () => {
+    const user = userEvent.setup();
+    render(<DeadEndNav />);
+
+    const trigger = screen.getByRole("button", { name: "Panelless" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(trigger).toHaveFocus();
+  });
+
+  it("survives the arrow on an already-open entry with no panel", async () => {
+    const user = userEvent.setup();
+    render(<DeadEndNav defaultValue="panelless" />);
+
+    const trigger = screen.getByRole("button", { name: "Panelless" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(trigger).toHaveFocus();
+  });
+
+  it("opens a panel that holds nothing focusable", async () => {
+    const user = userEvent.setup();
+    render(<DeadEndNav />);
+
+    const trigger = screen.getByRole("button", { name: "Prose" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(screen.getByTestId("prose-panel")).toBeVisible();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("survives the arrow on an already-open panel with nothing focusable", async () => {
+    const user = userEvent.setup();
+    render(<DeadEndNav defaultValue="prose" />);
+
+    const trigger = screen.getByRole("button", { name: "Prose" });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/NavigationMenu/__tests__/NavigationMenu.keyboard-navigation.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { NavigationMenu } from "../NavigationMenu";
+
+import {
+  horizontalArrowCases,
+  rtlArrowCases,
+  ThreeEntryNav,
+  verticalArrowCases,
+} from "./NavigationMenu.fixtures";
+
+describe("NavigationMenu — keyboard navigation", () => {
+  describe.each(horizontalArrowCases)(
+    "horizontal: $key from $from",
+    ({ key, from, expected }) => {
+      it(`moves focus to ${expected}`, async () => {
+        const user = userEvent.setup();
+        render(<ThreeEntryNav />);
+
+        screen.getByRole(from === "Changelog" ? "link" : "button", {
+          name: from,
+        }).focus();
+        await user.keyboard(key);
+
+        expect(screen.getByText(expected)).toHaveFocus();
+      });
+    },
+  );
+
+  describe.each(verticalArrowCases)(
+    "vertical: $key from $from",
+    ({ key, from, expected }) => {
+      it(`moves focus to ${expected}`, async () => {
+        const user = userEvent.setup();
+        render(<ThreeEntryNav orientation="vertical" />);
+
+        screen.getByRole("button", { name: from }).focus();
+        await user.keyboard(key);
+
+        expect(screen.getByText(expected)).toHaveFocus();
+      });
+    },
+  );
+
+  describe.each(rtlArrowCases)(
+    "rtl: $key from $from",
+    ({ key, from, expected }) => {
+      it(`moves focus to ${expected}`, async () => {
+        const user = userEvent.setup();
+        render(<ThreeEntryNav dir="rtl" />);
+
+        screen.getByRole(from === "Changelog" ? "link" : "button", {
+          name: from,
+        }).focus();
+        await user.keyboard(key);
+
+        expect(screen.getByText(expected)).toHaveFocus();
+      });
+    },
+  );
+
+  it("keeps every top-level entry in the tab order", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav />);
+
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Concepts" })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole("link", { name: "Changelog" })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Registry & CLI" })).toHaveFocus();
+  });
+
+  it("skips an entry that has since unmounted", async () => {
+    const user = userEvent.setup();
+
+    function ShrinkingNav() {
+      const [showBeta, setShowBeta] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setShowBeta(false)}>
+            Drop Beta
+          </button>
+          <NavigationMenu.Root>
+            <NavigationMenu.List>
+              <NavigationMenu.Item>
+                <NavigationMenu.Link href="/alpha">Alpha</NavigationMenu.Link>
+              </NavigationMenu.Item>
+              {showBeta && (
+                <NavigationMenu.Item>
+                  <NavigationMenu.Link href="/beta">Beta</NavigationMenu.Link>
+                </NavigationMenu.Item>
+              )}
+              <NavigationMenu.Item>
+                <NavigationMenu.Link href="/gamma">Gamma</NavigationMenu.Link>
+              </NavigationMenu.Item>
+            </NavigationMenu.List>
+          </NavigationMenu.Root>
+        </>
+      );
+    }
+
+    render(<ShrinkingNav />);
+    await user.click(screen.getByRole("button", { name: "Drop Beta" }));
+    screen.getByRole("link", { name: "Alpha" }).focus();
+    await user.keyboard("{ArrowRight}");
+
+    // An entry that fails to unregister leaves a detached element in the travel
+    // order, and the arrow lands on nothing at all.
+    expect(screen.getByRole("link", { name: "Gamma" })).toHaveFocus();
+  });
+
+  it("does not treat links inside a panel as top-level entries", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    screen.getByRole("button", { name: "Concepts" }).focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByRole("link", { name: "Changelog" })).toHaveFocus();
+  });
+});

package/src/NavigationMenu/__tests__/NavigationMenu.link.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { NavigationMenu } from "../NavigationMenu";
+
+import { ThreeEntryNav } from "./NavigationMenu.fixtures";
+
+describe("NavigationMenu.Link", () => {
+  it("marks the active link as the current page", () => {
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link href="/start" active>
+              Start Here
+            </NavigationMenu.Link>
+          </NavigationMenu.Item>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link href="/changelog">Changelog</NavigationMenu.Link>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    const active = screen.getByRole("link", { name: "Start Here" });
+    const inactive = screen.getByRole("link", { name: "Changelog" });
+
+    expect(active).toHaveAttribute("aria-current", "page");
+    expect(active).toHaveAttribute("data-active", "");
+    expect(inactive).not.toHaveAttribute("aria-current");
+    expect(inactive).not.toHaveAttribute("data-active");
+  });
+
+  it("closes the open panel when a link inside it is clicked", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    await user.click(screen.getByRole("link", { name: "Tokens" }));
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("requests the close with the empty string, not the link's own entry", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="concepts" onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("link", { name: "Tokens" }));
+
+    // A controlled parent has to be told "nothing is open" — any other value
+    // reads as "open that entry instead", which only looks like a close because
+    // no entry answers to it.
+    expect(onValueChange).toHaveBeenCalledWith("");
+  });
+
+  it("closes the open panel when a top-level link is clicked", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" />);
+
+    await user.click(screen.getByRole("link", { name: "Changelog" }));
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("composes the consumer's own link handlers with its own", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onKeyDown = vi.fn();
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link
+              href="/changelog"
+              onClick={onClick}
+              onKeyDown={onKeyDown}
+            >
+              Changelog
+            </NavigationMenu.Link>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    const link = screen.getByRole("link", { name: "Changelog" });
+    link.focus();
+    await user.keyboard("{ArrowRight}");
+    await user.click(link);
+
+    expect(onKeyDown).toHaveBeenCalledOnce();
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("renders a consumer element instead of the anchor with asChild", () => {
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link asChild active>
+              <button type="button">Start Here</button>
+            </NavigationMenu.Link>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    const rendered = screen.getByRole("button", { name: "Start Here" });
+
+    expect(rendered.tagName).toBe("BUTTON");
+    expect(rendered).toHaveAttribute("aria-current", "page");
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+
+  it("still closes the panel through an asChild link", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <NavigationMenu.Root defaultValue="concepts">
+        <NavigationMenu.List>
+          <NavigationMenu.Item value="concepts">
+            <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+            <NavigationMenu.Content data-testid="concepts-panel">
+              <NavigationMenu.Link asChild>
+                <a href="/tokens" onClick={onClick}>
+                  Tokens
+                </a>
+              </NavigationMenu.Link>
+            </NavigationMenu.Content>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    await user.click(screen.getByRole("link", { name: "Tokens" }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+});