@kinetixui/ui 0.16.0 → 0.17.0

package/src/components/data-grid.tsx

@@ -19,7 +19,7 @@ export interface DataGridColumn<TData> {
   /** fixed to this side, not draggable, and excluded from the reorder sequence */
   pinned?: "left" | "right";
   sortable?: boolean;
-  /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
+  /** double-click — or Enter / F2 on the focused cell — swaps it for a text input; commit fires on Enter/blur, Escape cancels */
   editable?: boolean;
   onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
@@ -173,11 +173,26 @@ function DataGrid<TData>({
     window.addEventListener("pointerup", handleUp);
   }
 
-  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string) {
-    column.onCellEdit?.(row, rowIndex, value);
+  // After a keyboard commit/cancel, hand focus back to the cell that was being edited (a blur
+  // commit — the user clicked or tabbed elsewhere — must not pull focus back).
+  const restoreFocusRef = React.useRef<{ rowIndex: number; columnId: string } | null>(null);
+  React.useEffect(() => {
+    const target = restoreFocusRef.current;
+    if (editing || !target) return;
+    restoreFocusRef.current = null;
+    containerRef.current?.querySelector<HTMLElement>(`[data-cell="${target.rowIndex}:${target.columnId}"]`)?.focus();
+  }, [editing]);
+
+  function endEdit(restoreFocus: boolean) {
+    if (restoreFocus && editing) restoreFocusRef.current = { rowIndex: editing.rowIndex, columnId: editing.columnId };
     setEditing(null);
   }
 
+  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string, restoreFocus = false) {
+    column.onCellEdit?.(row, rowIndex, value);
+    endEdit(restoreFocus);
+  }
+
   return (
     <div
       ref={containerRef}
@@ -224,9 +239,18 @@ function DataGrid<TData>({
                   });
                 }}
                 onClick={() => column.sortable && toggleSort(column.id)}
+                // a sortable header is a control: reachable with Tab, operated with Enter / Space
+                tabIndex={column.sortable ? 0 : undefined}
+                onKeyDown={(e) => {
+                  if (column.sortable && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    toggleSort(column.id);
+                  }
+                }}
                 className={cn(
                   "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
-                  column.sortable && "cursor-pointer hover:text-foreground",
+                  column.sortable &&
+                    "cursor-pointer outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                   column.pinned && "bg-background",
                 )}
                 style={{ width, ...pinnedStyle }}
@@ -271,8 +295,21 @@ function DataGrid<TData>({
                     <div
                       key={column.id}
                       role="gridcell"
+                      data-cell={`${rowIndex}:${column.id}`}
                       onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
-                      className={cn("flex shrink-0 items-center px-2", column.pinned && "bg-background")}
+                      // an editable cell is reachable with Tab and entered with Enter or F2 (the spreadsheet convention)
+                      tabIndex={column.editable ? 0 : undefined}
+                      onKeyDown={(e) => {
+                        if (column.editable && e.target === e.currentTarget && (e.key === "Enter" || e.key === "F2")) {
+                          e.preventDefault();
+                          setEditing({ rowIndex, columnId: column.id });
+                        }
+                      }}
+                      className={cn(
+                        "flex shrink-0 items-center px-2",
+                        column.editable && "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                        column.pinned && "bg-background",
+                      )}
                       style={{ width, ...pinnedStyle }}
                     >
                       {isEditing ? (
@@ -281,8 +318,8 @@ function DataGrid<TData>({
                           defaultValue={column.value ? String(column.value(row)) : ""}
                           className="h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring"
                           onKeyDown={(e) => {
-                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
-                            else if (e.key === "Escape") setEditing(null);
+                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value, true);
+                            else if (e.key === "Escape") endEdit(true);
                           }}
                           onBlur={(e) => commitEdit(column, row, rowIndex, e.currentTarget.value)}
                         />

package/src/components/inform.tsx

@@ -16,7 +16,7 @@ const informVariants = cva(
   {
     variants: {
       variant: {
-        information: "bg-info/10 text-info",
+        information: "bg-info/10 text-info-on-container",
         warning: "bg-warning/15 text-warning",
         success: "bg-success/15 text-success",
         error: "bg-destructive/10 text-destructive",

package/src/components/input.tsx

@@ -22,7 +22,7 @@ import { cn } from "../lib/utils";
 const inputVariants = cva(
   [
     "flex w-full 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",

package/src/components/kbd.tsx

@@ -20,7 +20,7 @@ const Kbd = React.forwardRef<HTMLElement, KbdProps>(({ className, asChild = fals
     <Comp
       ref={ref}
       className={cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-input bg-muted px-1.5 font-sans text-label-sm text-muted-foreground",
         className,
       )}
       {...props}

package/src/components/modal.tsx

@@ -75,7 +75,7 @@ function Modal({
           )}
         >
           <header className="flex items-center justify-between px-6 pb-3 pt-5">
-            <DialogPrimitive.Title className="min-w-0 flex-1 text-[18px] font-semibold leading-6 text-foreground">
+            <DialogPrimitive.Title className="min-w-0 flex-1 text-title-dialog text-foreground">
               {title}
             </DialogPrimitive.Title>
             <DialogPrimitive.Close
@@ -90,7 +90,7 @@ function Modal({
 
           <div className="px-6 py-5">
             {description && (
-              <DialogPrimitive.Description className="text-[14px] leading-5 tracking-[0.25px] text-muted-foreground">
+              <DialogPrimitive.Description className="text-body-md text-muted-foreground">
                 {description}
               </DialogPrimitive.Description>
             )}

package/src/components/multi-select.tsx

@@ -43,6 +43,12 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
     const current = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
+    const anchorRef = React.useRef<HTMLDivElement | null>(null);
+    const setRefs = (node: HTMLDivElement | null) => {
+      anchorRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    };
 
     const set = (next: string[]) => {
       setInternal(next);
@@ -62,7 +68,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverAnchor asChild>
           <div
-            ref={ref}
+            ref={setRefs}
             role="combobox"
             aria-expanded={open}
             aria-haspopup="listbox"
@@ -93,7 +99,13 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
         <PopoverContent
           align="start"
           className="w-[var(--radix-popover-trigger-width)] p-0"
-          onOpenAutoFocus={(e) => e.preventDefault()}
+          // Radix focuses the search input on open, so keys reach the option list (cmdk only
+          // listens from inside its own root) — and on close focus goes back to the combobox,
+          // which is only an anchor here, so Radix has no trigger to return it to.
+          onCloseAutoFocus={(e) => {
+            e.preventDefault();
+            anchorRef.current?.focus();
+          }}
         >
           <Command shouldFilter={!creatable}>
             <CommandInput placeholder="Search…" value={query} onValueChange={setQuery} />

package/src/components/native-select.tsx

@@ -16,7 +16,7 @@ import { cn } from "../lib/utils";
 const nativeSelectVariants = cva(
   [
     "flex w-full appearance-none border border-input bg-background px-3 py-3 pe-9",
-    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "font-sans text-body-md text-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",

package/src/components/select.tsx

@@ -22,7 +22,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex min-h-[44px] w-full items-center justify-between 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",
       "data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       "outline-none transition-colors",
       "focus:border-primary focus:shadow-focus",

package/src/components/slider.tsx

@@ -7,7 +7,7 @@ import { cn } from "../lib/utils";
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn("relative flex w-full touch-none select-none items-center", className)}
@@ -16,7 +16,12 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled" />
+    {/* the accessible name belongs on the thumb: that is the element with role="slider" */}
+    <SliderPrimitive.Thumb
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
+    />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

package/src/components/tag.tsx

@@ -13,7 +13,7 @@ import { cn } from "../lib/utils";
  * optional close button. Variants: default | secondary | destructive | warning | outline.
  */
 const tagVariants = cva(
-  "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium font-sans tracking-[0.5px]",
+  "inline-flex items-center gap-1 rounded-sm px-2 py-1 text-label-md font-sans",
   {
     variants: {
       variant: {

package/src/components/textarea.tsx

@@ -14,7 +14,7 @@ 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",

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-a11y.test.tsx

@@ -0,0 +1,90 @@
+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 already existed when this pass was added
+ * (mostly demo stories with unlabeled controls — fix the story or the component), keyed
+ * `story:rule`. A new violation fails; fixing a known one fails too (stale
+ * entry) until it is deleted from the list, so the baseline only shrinks.
+ */
+const stories = import.meta.glob("./stories/*.stories.tsx", { eager: true }) as Record<
+  string,
+  Record<string, unknown>
+>;
+
+const KNOWN = new Set<string>([
+  "Banner:landmark-no-duplicate-banner",
+  "Banner:landmark-unique",
+  "CircularProgress:aria-progressbar-name",
+  "ColorPicker:label",
+  "DiffViewer:aria-required-children",
+  "FileUpload:label",
+  "FileUpload:nested-interactive",
+  "InputOTP:label",
+  "JsonViewer:aria-required-parent",
+  "List:aria-required-children",
+  "List:button-name",
+  "MarkdownEditor:label",
+  "MultiSelect:aria-input-field-name",
+  "NativeSelect:select-name",
+  "NumberInput:label",
+  "Progress:aria-progressbar-name",
+  "Select:button-name",
+  "Slider:aria-input-field-name",
+  "ToggleGroup:button-name",
+]);
+
+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([]);
+    });
+  }
+});