@kinetixui/ui 0.16.1 → 0.18.0

package/src/components/textarea.tsx

@@ -14,10 +14,10 @@ import { cn } from "../lib/utils";
 const textareaVariants = cva(
   [
     "flex w-full min-h-[100px] resize-y rounded-sm border border-input bg-background px-3 py-3",
-    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
-    "focus-visible:border-primary focus-visible:shadow-focus",
+    "focus-visible:border-action focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
   ],
@@ -25,7 +25,7 @@ const textareaVariants = cva(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none resize-none",
       },

package/src/components/timeline.tsx

@@ -35,7 +35,7 @@ const Body = ({ item, align }: { item: TimelineItem; align: "left" | "right" })
 
 const Rail = ({ item, isLast }: { item: TimelineItem; isLast: boolean }) => (
   <div className="flex flex-col items-center">
-    <span className="flex size-2.5 shrink-0 items-center justify-center rounded-full bg-primary">{item.icon}</span>
+    <span className="flex size-2.5 shrink-0 items-center justify-center rounded-full bg-action">{item.icon}</span>
     {!isLast && <span aria-hidden className="my-1 w-px flex-1 bg-border" />}
   </div>
 );

package/src/components/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-overlay overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
+        "z-overlay overflow-hidden rounded-md bg-action px-3 py-1.5 text-xs text-action-foreground font-sans",
         "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,

package/src/components/tour.tsx

@@ -55,6 +55,43 @@ const Tour: React.FC<TourProps> = ({
 
   React.useEffect(() => setMounted(true), []);
 
+  const titleId = React.useId();
+  const dialogRef = React.useRef<HTMLDivElement>(null);
+  const returnFocusRef = React.useRef<HTMLElement | null>(null);
+
+  // Remember what had focus when the tour opened and give it back when it closes.
+  React.useEffect(() => {
+    if (!open) return;
+    returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    return () => returnFocusRef.current?.focus();
+  }, [open]);
+
+  // Move focus into the dialog on open and on every step, so a screen reader announces the new title.
+  React.useEffect(() => {
+    if (open && mounted) dialogRef.current?.focus();
+  }, [open, mounted, stepIndex]);
+
+  // aria-modal only *tells* assistive tech the page is inert; keep Tab inside the card ourselves.
+  const trapTab = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== "Tab") return;
+    const dialog = e.currentTarget;
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>("button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex='-1'])"));
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusable[0]!;
+    const last = focusable[focusable.length - 1]!;
+    const active = document.activeElement;
+    if (e.shiftKey && (active === first || active === dialog)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
   React.useEffect(() => {
     if (!open || !step) return;
     const update = () => {
@@ -114,12 +151,18 @@ const Tour: React.FC<TourProps> = ({
         style={spotlightStyle}
       />
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
-        className="fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg transition-all duration-fast"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        onKeyDown={trapTab}
+        className="fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg outline-none transition-all duration-fast"
         style={cardStyle}
       >
-        <p className="text-title-sm font-medium text-foreground">{step.title}</p>
+        <p id={titleId} className="text-title-sm font-medium text-foreground">
+          {step.title}
+        </p>
         <div className="mt-1.5 text-body-sm text-muted-foreground">{step.content}</div>
         <div className="mt-4 flex items-center justify-between">
           <span className="text-label-sm text-muted-foreground">

package/src/components/virtual-list.tsx

@@ -63,7 +63,8 @@ function VirtualList<T>({
     <div
       ref={containerRef}
       role="list"
-      className={cn("overflow-y-auto font-sans", className)}
+      tabIndex={0}
+      className={cn("overflow-y-auto font-sans outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", className)}
       style={{ height, ...style }}
       onScroll={(e) => {
         onScroll?.(e);

package/src/components-a11y.test.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import axe from "axe-core";
+import { render, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+/**
+ * Rendered accessibility pass: mount every story in jsdom and run axe-core over
+ * the resulting DOM. This catches what the static contrast/token checks can't —
+ * missing accessible names, invalid ARIA, bad roles, duplicate ids, label
+ * association. jsdom has no layout or stylesheet, so `color-contrast` (covered
+ * by `pnpm check:contrast`) and page-level rules are off.
+ *
+ * KNOWN lists violations that are tolerated, keyed `story:rule`. It is empty: every story
+ * is clean. A new violation fails; if you must baseline one, a later fix fails until the
+ * entry is deleted, so the list can only shrink.
+ */
+const stories = import.meta.glob("./stories/*.stories.tsx", { eager: true }) as Record<
+  string,
+  Record<string, unknown>
+>;
+
+const KNOWN = new Set<string>([]);
+
+afterEach(cleanup);
+
+async function violationsFor(container: HTMLElement) {
+  const results = await axe.run(container, {
+    rules: {
+      "color-contrast": { enabled: false },
+      region: { enabled: false },
+      "landmark-one-main": { enabled: false },
+      "page-has-heading-one": { enabled: false },
+    },
+  });
+  return results.violations.map((v) => v.id);
+}
+
+describe("component a11y (axe)", () => {
+  const entries = Object.entries(stories).sort(([a], [b]) => a.localeCompare(b));
+
+  for (const [path, mod] of entries) {
+    const name = path.split("/").pop()!.replace(".stories.tsx", "");
+    const meta = mod.default as { component?: React.ComponentType<unknown>; args?: Record<string, unknown> };
+    const storyKey = ["Default", "Playground", "Variants", "States"].find(
+      (k) => mod[k] && typeof mod[k] === "object",
+    );
+    const story = storyKey
+      ? (mod[storyKey] as { render?: (...a: unknown[]) => React.ReactNode; args?: Record<string, unknown> })
+      : undefined;
+
+    it(`${name} has no new axe violations`, async () => {
+      const args = { ...meta?.args, ...story?.args };
+      const node =
+        typeof story?.render === "function"
+          ? story.render(args, { args } as never)
+          : meta?.component
+            ? React.createElement(meta.component, args)
+            : null;
+      if (node === null) return;
+
+      const { container } = render(node as React.ReactElement);
+      const found = new Set((await violationsFor(container)).map((id) => `${name}:${id}`));
+      const fresh = [...found].filter((k) => !KNOWN.has(k));
+      const stale = [...KNOWN].filter((k) => k.startsWith(`${name}:`) && !found.has(k));
+      expect(fresh, `new axe violations (story:rule)`).toEqual([]);
+      expect(stale, `fixed — remove from KNOWN`).toEqual([]);
+    });
+  }
+});

package/src/components-behavior.test.tsx

@@ -65,7 +65,7 @@ describe("Badge", () => {
     );
     const link = screen.getByRole("link", { name: "New" });
     expect(link).toHaveAttribute("href", "/new");
-    expect(link).toHaveClass("bg-primary"); // badge classes merged onto the <a>
+    expect(link).toHaveClass("bg-action"); // badge classes merged onto the <a>
   });
 });