feat(a11y): contrast tokens, accent-solid, responsive drawer, keyboard menus

- Contrast: --fg-muted reaches 4.5:1 on every surface in all nine themes (dark default was 2.55:1); status chips and accent text clear 4.5:1 on their own tints. New --accent-solid(/-hover) + tailwind `accent-solid` is the fill behind white text (.btn-primary, Switch on, Checkbox tick); --accent is now a text colour. Switch off / unchecked Checkbox get a >=3:1 edge. - <html lang> follows the chosen language; a global prefers-reduced-motion rule; index.html body uses a token instead of text-gray-200. - Layout: the sidebar starts collapsed below lg and becomes an off-canvas drawer below md (menu button, backdrop, Escape, useDialog). - ContextMenu: focus moves in, arrows/Home/End, Escape/Tab close, focus returns, a keyboard-opened menu anchors to its target. Select is a real listbox button (aria-expanded, activedescendant, type-ahead). PageTabs implements APG tabs with a tabpanel. New .btn-secondary/.btn-danger/ .btn-icon and a .select class for native selects, all with focus rings. - StatusBar announces connection and "N need you" politely; Sidebar's connection modal uses useDialog; EmptyState/Skeleton/AiToolIcon a11y. - api.ts request(): a non-JSON 200 throws a translated EBADRESPONSE instead of "Unexpected token '<'".
2026-10-05 13:22:00 +07:00
parent 17a5c7470d
commit 8fb703c6db
26 changed files with 917 additions and 167 deletions
@@ -0,0 +1,94 @@
+/**
+ * @file ContextMenu.test.tsx
+ * @description Keyboard model of the shared context menu: focus lands on the
+ * first item, arrows/Home/End move (wrapping, skipping disabled items), Escape
+ * and Tab close and hand focus back to the trigger, and a keyboard-opened menu
+ * (clientX/Y 0) anchors under its element.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ContextMenu, MenuItem, useContextMenu } from "../ContextMenu";
+
+function Harness({ onPick = () => {} }: { onPick?: (s: string) => void }) {
+  const { menu, open, close } = useContextMenu<string>();
+  return (
+    <>
+      <button onContextMenu={(e) => open(e, "row")}>trigger</button>
+      {menu && (
+        <ContextMenu x={menu.x} y={menu.y} onClose={close}>
+          <MenuItem onSelect={() => (onPick("a"), close())}>Alpha</MenuItem>
+          <MenuItem disabled onSelect={() => {}}>
+            Beta
+          </MenuItem>
+          <MenuItem onSelect={() => (onPick("c"), close())}>Gamma</MenuItem>
+        </ContextMenu>
+      )}
+    </>
+  );
+}
+
+const item = (name: string) => screen.getByRole("menuitem", { name });
+
+describe("ContextMenu keyboard", () => {
+  it("focuses the first item and moves with arrows, Home and End", () => {
+    render(<Harness />);
+    const trigger = screen.getByText("trigger");
+    trigger.focus();
+    fireEvent.contextMenu(trigger, { clientX: 40, clientY: 50 });
+    expect(item("Alpha")).toHaveFocus();
+    fireEvent.keyDown(item("Alpha"), { key: "ArrowDown" });
+    expect(item("Gamma")).toHaveFocus(); // Beta is disabled
+    fireEvent.keyDown(item("Gamma"), { key: "ArrowDown" });
+    expect(item("Alpha")).toHaveFocus(); // wraps
+    fireEvent.keyDown(item("Alpha"), { key: "ArrowUp" });
+    expect(item("Gamma")).toHaveFocus();
+    fireEvent.keyDown(item("Gamma"), { key: "Home" });
+    expect(item("Alpha")).toHaveFocus();
+    fireEvent.keyDown(item("Alpha"), { key: "End" });
+    expect(item("Gamma")).toHaveFocus();
+  });
+
+  it.each(["Escape", "Tab"])("%s closes and returns focus to the trigger", (key) => {
+    render(<Harness />);
+    const trigger = screen.getByText("trigger");
+    trigger.focus();
+    fireEvent.contextMenu(trigger, { clientX: 40, clientY: 50 });
+    fireEvent.keyDown(item("Alpha"), { key });
+    expect(screen.queryByRole("menu")).toBeNull();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("Escape in the menu does not reach a document listener (a dialog behind)", () => {
+    const behind = vi.fn();
+    document.addEventListener("keydown", behind);
+    render(<Harness />);
+    fireEvent.contextMenu(screen.getByText("trigger"), { clientX: 40, clientY: 50 });
+    fireEvent.keyDown(item("Alpha"), { key: "Escape" });
+    document.removeEventListener("keydown", behind);
+    expect(behind).not.toHaveBeenCalled();
+  });
+
+  it("returns focus to the trigger after an item runs", () => {
+    const pick = vi.fn();
+    render(<Harness onPick={pick} />);
+    const trigger = screen.getByText("trigger");
+    trigger.focus();
+    fireEvent.contextMenu(trigger, { clientX: 40, clientY: 50 });
+    fireEvent.click(item("Gamma"));
+    expect(pick).toHaveBeenCalledWith("c");
+    expect(trigger).toHaveFocus();
+  });
+
+  it("anchors a keyboard-opened menu (clientX/Y 0) under the element", () => {
+    render(<Harness />);
+    const trigger = screen.getByText("trigger");
+    trigger.getBoundingClientRect = () =>
+      ({ left: 120, bottom: 80, top: 60, right: 200, width: 80, height: 20 }) as DOMRect;
+    fireEvent.contextMenu(trigger, { clientX: 0, clientY: 0 });
+    const menu = screen.getByRole("menu");
+    expect(menu.style.left).toBe("120px");
+    expect(menu.style.top).toBe("80px");
+  });
+});