@kinetixui/ui 0.17.0 → 0.18.0

package/src/components-keyboard.test.tsx

@@ -4,6 +4,8 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { Checkbox } from "./components/checkbox";
 import { ColorPicker } from "./components/color-picker";
+import { FileUpload } from "./components/file-upload";
+import { List, ListItem } from "./components/list";
 import { DataGrid, type DataGridColumn } from "./components/data-grid";
 import { KinetixDirectionProvider } from "./components/direction-provider";
 import {
@@ -432,84 +434,225 @@ describe("DataGrid", () => {
     { id: 2, name: "Abe" },
     { id: 3, name: "Bea" },
   ];
-  function setup(onCellEdit = vi.fn()) {
+  function setup(opts: { onCellEdit?: ReturnType<typeof vi.fn>; data?: Row[]; wrapper?: (n: React.ReactNode) => React.ReactNode } = {}) {
+    const onCellEdit = opts.onCellEdit ?? vi.fn();
     const columns: DataGridColumn<Row>[] = [
       { id: "name", header: "Name", cell: (r) => r.name, value: (r) => r.name, sortable: true, editable: true, onCellEdit },
-      { id: "id", header: "ID", cell: (r) => r.id, value: (r) => r.id },
+      { id: "id", header: "ID", cell: (r) => r.id, value: (r) => r.id, minWidth: 60, width: 100 },
     ];
-    render(<DataGrid columns={columns} data={rows} height={200} getRowId={(r) => r.id} />);
+    const grid = <DataGrid columns={columns} data={opts.data ?? rows} height={200} getRowId={(r) => r.id} />;
+    render(
+      <>
+        {opts.wrapper ? opts.wrapper(grid) : grid}
+        <button>after</button>
+      </>,
+    );
     return onCellEdit;
   }
+  const header = (name: string) => screen.getByRole("columnheader", { name });
+  const cell = (r: number, c: number) => screen.getAllByRole("row")[r + 1]!.querySelectorAll<HTMLElement>('[role="gridcell"]')[c]!;
   const names = () => screen.getAllByRole("gridcell").filter((c) => /^(Cara|Abe|Bea)$/.test(c.textContent ?? "")).map((c) => c.textContent);
 
-  it("sorts from the keyboard: a sortable header is focusable and Enter / Space toggle it", async () => {
+  it("is a single tab stop: Tab enters on the first header, the next Tab leaves the grid", async () => {
     const user = userEvent.setup();
     setup();
-    const header = screen.getByRole("columnheader", { name: "Name" });
-    expect(header).toHaveAttribute("aria-sort", "none");
     await user.tab();
-    expect(header).toHaveFocus();
+    expect(header("Name")).toHaveFocus();
+    expect(header("ID")).toHaveAttribute("tabindex", "-1");
+    expect(cell(0, 0)).toHaveAttribute("tabindex", "-1");
+    await user.tab();
+    expect(screen.getByRole("button", { name: "after" })).toHaveFocus();
+  });
 
-    await user.keyboard("{Enter}");
-    expect(header).toHaveAttribute("aria-sort", "ascending");
-    expect(names()).toEqual(["Abe", "Bea", "Cara"]);
-    await user.keyboard(" ");
-    expect(header).toHaveAttribute("aria-sort", "descending");
-    expect(names()).toEqual(["Cara", "Bea", "Abe"]);
+  it("exposes grid dimensions and row / column indexes (rows are virtualized, so they must be explicit)", () => {
+    setup();
+    const grid = screen.getByRole("grid");
+    expect(grid).toHaveAttribute("aria-rowcount", "4"); // header + 3
+    expect(grid).toHaveAttribute("aria-colcount", "2");
+    expect(screen.getAllByRole("row")[0]).toHaveAttribute("aria-rowindex", "1");
+    expect(screen.getAllByRole("row")[3]).toHaveAttribute("aria-rowindex", "4");
+    expect(cell(0, 1)).toHaveAttribute("aria-colindex", "2");
   });
 
-  it("a header that is not sortable is not a tab stop", async () => {
+  it("moves between cells with the arrow keys, header row included, and stops at the edges", async () => {
     const user = userEvent.setup();
     setup();
-    expect(screen.getByRole("columnheader", { name: "ID" })).not.toHaveAttribute("tabindex");
     await user.tab(); // Name header
-    await user.tab(); // first editable cell — the ID header was skipped
-    expect(screen.getAllByRole("gridcell")[0]).toHaveFocus();
+    await user.keyboard("{ArrowRight}");
+    expect(header("ID")).toHaveFocus();
+    await user.keyboard("{ArrowRight}"); // last column: stays
+    expect(header("ID")).toHaveFocus();
+    await user.keyboard("{ArrowDown}");
+    expect(cell(0, 1)).toHaveFocus();
+    await user.keyboard("{ArrowLeft}");
+    expect(cell(0, 0)).toHaveFocus();
+    await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}"); // past the last row: stays
+    expect(cell(2, 0)).toHaveFocus();
+    await user.keyboard("{ArrowUp}{ArrowUp}{ArrowUp}");
+    expect(header("Name")).toHaveFocus();
+  });
+
+  it("Home / End go to the row ends; Ctrl+Home / Ctrl+End to the grid corners", async () => {
+    const user = userEvent.setup();
+    setup();
+    await user.tab();
+    await user.keyboard("{ArrowDown}{ArrowDown}"); // row 1, Name
+    await user.keyboard("{End}");
+    expect(cell(1, 1)).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(cell(1, 0)).toHaveFocus();
+    await user.keyboard("{Control>}{End}{/Control}");
+    expect(cell(2, 1)).toHaveFocus();
+    await user.keyboard("{Control>}{Home}{/Control}");
+    expect(header("Name")).toHaveFocus();
+  });
+
+  it("remembers the active cell: leaving and re-entering the grid returns to it", async () => {
+    const user = userEvent.setup();
+    setup();
+    await user.tab();
+    await user.keyboard("{ArrowDown}{ArrowRight}");
+    expect(cell(0, 1)).toHaveFocus();
+    await user.tab(); // out
+    expect(screen.getByRole("button", { name: "after" })).toHaveFocus();
+    await user.tab({ shift: true }); // back in
+    expect(cell(0, 1)).toHaveFocus();
+  });
+
+  it("sorts from the keyboard: Enter / Space on a sortable header", async () => {
+    const user = userEvent.setup();
+    setup();
+    await user.tab();
+    expect(header("Name")).toHaveAttribute("aria-sort", "none");
+    await user.keyboard("{Enter}");
+    expect(header("Name")).toHaveAttribute("aria-sort", "ascending");
+    expect(names()).toEqual(["Abe", "Bea", "Cara"]);
+    await user.keyboard(" ");
+    expect(header("Name")).toHaveAttribute("aria-sort", "descending");
+    expect(names()).toEqual(["Cara", "Bea", "Abe"]);
   });
 
   it("edits a cell from the keyboard: Enter to edit, Enter to commit, focus returns to the cell", async () => {
     const user = userEvent.setup();
     const onCellEdit = setup();
-    await user.tab(); // sortable Name header
-    await user.tab(); // first editable cell
-    const cell = screen.getAllByRole("gridcell")[0]!;
-    expect(cell).toHaveFocus();
+    await user.tab();
+    await user.keyboard("{ArrowDown}");
+    const target = cell(0, 0);
+    expect(target).toHaveFocus();
 
     await user.keyboard("{Enter}");
-    const input = within(cell).getByRole("textbox");
+    const input = within(target).getByRole("textbox");
     expect(input).toHaveFocus();
     await user.clear(input);
     await user.type(input, "Zed{Enter}");
 
     expect(onCellEdit).toHaveBeenCalledTimes(1);
     expect(onCellEdit).toHaveBeenCalledWith(rows[0], 0, "Zed");
-    await waitFor(() => expect(within(cell).queryByRole("textbox")).not.toBeInTheDocument());
-    expect(cell).toHaveFocus();
+    await waitFor(() => expect(within(target).queryByRole("textbox")).not.toBeInTheDocument());
+    expect(target).toHaveFocus();
+    await user.keyboard("{ArrowDown}"); // navigation still works after an edit
+    expect(cell(1, 0)).toHaveFocus();
   });
 
   it("Escape cancels an edit without committing and returns focus to the cell", async () => {
     const user = userEvent.setup();
     const onCellEdit = setup();
     await user.tab();
-    await user.tab();
-    const cell = screen.getAllByRole("gridcell")[0]!;
+    await user.keyboard("{ArrowDown}");
+    const target = cell(0, 0);
     await user.keyboard("{F2}");
-    await user.type(within(cell).getByRole("textbox"), "x{Escape}");
+    await user.type(within(target).getByRole("textbox"), "x{Escape}");
 
     expect(onCellEdit).not.toHaveBeenCalled();
-    expect(cell).toHaveFocus();
+    expect(target).toHaveFocus();
+  });
+
+  it("Alt+Arrow reorders a column from its header, keeps focus on it, and announces the move", async () => {
+    const user = userEvent.setup();
+    setup();
+    await user.tab(); // Name header
+    const headersBefore = screen.getAllByRole("columnheader").map((h) => h.textContent);
+    expect(headersBefore).toEqual(["Name", "ID"]);
+
+    await user.keyboard("{Alt>}{ArrowRight}{/Alt}");
+    await waitFor(() => expect(screen.getAllByRole("columnheader").map((h) => h.textContent)).toEqual(["ID", "Name"]));
+    expect(header("Name")).toHaveFocus();
+    expect(screen.getByRole("status")).toHaveTextContent("Name moved to position 2 of 2");
+
+    await user.keyboard("{Alt>}{ArrowRight}{/Alt}"); // already last
+    expect(screen.getByRole("status")).toHaveTextContent("already the last movable column");
   });
 
-  // KNOWN GAP — the ARIA grid pattern also wants arrow-key movement between cells (roving tabindex),
-  // plus keyboard equivalents for column reorder and resize. Not implemented yet; `it.fails` turns
-  // this into an error the day it starts passing, so the gap can't be forgotten or silently closed.
-  it.fails("moves between cells with the arrow keys", async () => {
+  it("Shift+Arrow resizes a column from its header and announces the width", async () => {
     const user = userEvent.setup();
     setup();
     await user.tab();
+    await user.keyboard("{ArrowRight}"); // ID header, width 100, min 60
+    expect(header("ID")).toHaveStyle({ width: "100px" });
+    await user.keyboard("{Shift>}{ArrowRight}{/Shift}");
+    expect(header("ID")).toHaveStyle({ width: "110px" });
+    expect(screen.getByRole("status")).toHaveTextContent("ID column width 110 pixels");
+    await user.keyboard("{Shift>}{ArrowLeft}{ArrowLeft}{ArrowLeft}{ArrowLeft}{ArrowLeft}{/Shift}");
+    expect(header("ID")).toHaveStyle({ width: "60px" }); // clamped to minWidth
+  });
+
+  it("advertises the header chords with aria-keyshortcuts", () => {
+    setup();
+    expect(header("Name")).toHaveAttribute("aria-keyshortcuts", expect.stringContaining("Alt+ArrowLeft"));
+  });
+
+  it("mirrors the arrow keys under RTL", async () => {
+    const user = userEvent.setup();
+    setup({ wrapper: (n) => <div dir="rtl" style={{ direction: "rtl" }}>{n}</div> });
     await user.tab();
+    expect(header("Name")).toHaveFocus();
+    await user.keyboard("{ArrowLeft}"); // in RTL the next column is to the left
+    expect(header("ID")).toHaveFocus();
     await user.keyboard("{ArrowRight}");
-    expect(screen.getAllByRole("gridcell")[1]).toHaveFocus();
+    expect(header("Name")).toHaveFocus();
+  });
+
+  describe("with many rows (virtualized)", () => {
+    const many: Row[] = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
+
+    it("scrolls the target row into the rendered window and focuses it", async () => {
+      const user = userEvent.setup();
+      setup({ data: many });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      for (let i = 0; i < 30; i++) await user.keyboard("{ArrowDown}");
+      await waitFor(() => expect(document.activeElement).toHaveTextContent("Person 31"));
+      expect(document.activeElement).toHaveAttribute("data-cell", "30:name");
+    });
+
+    it("PageDown / Ctrl+End jump by a page and to the last row", async () => {
+      const user = userEvent.setup();
+      setup({ data: many });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard("{PageDown}");
+      await waitFor(() => expect(document.activeElement?.getAttribute("data-cell")).toMatch(/^(\d+):name$/));
+      const jumped = Number(document.activeElement!.getAttribute("data-cell")!.split(":")[0]);
+      expect(jumped).toBeGreaterThan(2);
+
+      await user.keyboard("{Control>}{End}{/Control}");
+      await waitFor(() => expect(document.activeElement).toHaveAttribute("data-cell", "199:id"));
+    });
+
+    it("stays reachable by Tab even after the active row scrolls out of the rendered window", async () => {
+      const user = userEvent.setup();
+      setup({ data: many });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard("{Control>}{End}{/Control}");
+      await waitFor(() => expect(document.activeElement).toHaveAttribute("data-cell", "199:id"));
+      await user.tab(); // out
+      const grid = screen.getByRole("grid");
+      grid.scrollTop = 0;
+      grid.dispatchEvent(new Event("scroll"));
+      await user.tab({ shift: true });
+      expect(grid.contains(document.activeElement)).toBe(true);
+    });
   });
 });
 
@@ -569,3 +712,63 @@ describe("Slider", () => {
     expect(onValueChange).toHaveBeenLastCalledWith([100]);
   });
 });
+
+describe("MultiSelect chips", () => {
+  it("Backspace in the empty search field removes the last chip", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        aria-label="Fruit"
+        options={[
+          { value: "a", label: "Apple" },
+          { value: "b", label: "Banana" },
+        ]}
+        defaultValue={["a", "b"]}
+        onValueChange={onValueChange}
+      />,
+    );
+    await user.tab();
+    await user.keyboard("{Enter}");
+    await user.keyboard("{Backspace}");
+    expect(onValueChange).toHaveBeenLastCalledWith(["a"]);
+  });
+});
+
+describe("List", () => {
+  it("a pressable row is a listitem containing a button, and Enter / Space activate it", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <List>
+        <ListItem title="Profile" onSelect={onSelect} />
+        <ListItem title="Static" />
+      </List>,
+    );
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(2);
+    const button = within(items[0]!).getByRole("button", { name: "Profile" });
+    await user.tab();
+    expect(button).toHaveFocus();
+    await user.keyboard("{Enter}");
+    await user.keyboard(" ");
+    expect(onSelect).toHaveBeenCalledTimes(2);
+    expect(within(items[1]!).queryByRole("button")).not.toBeInTheDocument();
+  });
+});
+
+describe("FileUpload", () => {
+  it("has exactly one keyboard target — the Browse button — not a nested control or the hidden input", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <FileUpload />
+        <button>after</button>
+      </>,
+    );
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Browse files" })).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole("button", { name: "after" })).toHaveFocus();
+  });
+});

package/src/stories/AppBar.stories.tsx

@@ -8,7 +8,7 @@ import { Bell } from "lucide-react";
 const Demo = () => (
     <AppBar className="w-full max-w-2xl rounded-md border">
       <AppBarBrand>
-        <span className="grid size-6 place-items-center rounded bg-primary text-label-sm font-bold text-primary-foreground">
+        <span className="grid size-6 place-items-center rounded bg-primary text-[11px] font-bold text-primary-foreground">
           A
         </span>
         Acme

package/src/stories/Checkbox.stories.tsx

@@ -24,6 +24,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox aria-label="Accept terms" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/CircularProgress.stories.tsx

@@ -12,9 +12,9 @@ const Demo = () => {
     }, []);
     return (
       <div className="flex items-center gap-6">
-        <CircularProgress value={v} showValue />
-        <CircularProgress value={v} size={64} strokeWidth={6} showValue />
-        <CircularProgress value={v} />
+        <CircularProgress value={v} showValue aria-label="Upload progress" />
+        <CircularProgress value={v} size={64} strokeWidth={6} showValue aria-label="Upload progress" />
+        <CircularProgress value={v} aria-label="Upload progress" />
       </div>
     );
   };
@@ -37,6 +37,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <CircularProgress {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <CircularProgress aria-label="Upload progress" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/InputOTP.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@kinetixui/ui";
 
 const Demo = () => (
-    <InputOTP maxLength={6}>
+    <InputOTP maxLength={6} aria-label="One-time code">
       <InputOTPGroup>
         {Array.from({ length: 6 }).map((_, i) => (
           <InputOTPSlot key={i} index={i} />
@@ -18,7 +18,7 @@ const meta = {
   title: "Form Inputs/InputOTP",
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<InputOTP maxLength={6}>\\n  <InputOTPGroup>\\n    <InputOTPSlot index={0} />\\n    ...\\n    <InputOTPSlot index={5} />\\n  </InputOTPGroup>\\n</InputOTP>", language: "tsx" } },
+    docs: { source: { code: "<InputOTP maxLength={6} aria-label=\\\"One-time code\\\">\\n  <InputOTPGroup>\\n    <InputOTPSlot index={0} />\\n    ...\\n    <InputOTPSlot index={5} />\\n  </InputOTPGroup>\\n</InputOTP>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/List.stories.tsx

@@ -8,7 +8,7 @@ import { Bell, Settings, User } from "lucide-react";
 const Demo = () => (
     <List className="w-full max-w-sm rounded-md border">
       <ListItem leading={<User className="size-5 text-muted-foreground" />} title="Profile" description="Name, photo, and personal details" trailing={<Badge variant="outline">2</Badge>} onSelect={() => {}} />
-      <ListItem leading={<Bell className="size-5 text-muted-foreground" />} title="Notifications" description="Push, email and SMS preferences" trailing={<Switch />} />
+      <ListItem leading={<Bell className="size-5 text-muted-foreground" />} title="Notifications" description="Push, email and SMS preferences" trailing={<Switch aria-label="Notifications" />} />
       <ListItem leading={<Settings className="size-5 text-muted-foreground" />} title="Settings" onSelect={() => {}} />
     </List>
   );
@@ -17,7 +17,7 @@ const meta = {
   title: "Data Display/List",
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<List>\\n  <ListItem\\n    leading={<User />}\\n    title=\"Profile\"\\n    description=\"Name, photo, and personal details\"\\n    onSelect={() => router.push(\"/profile\")}\\n  />\\n  <ListItem leading={<Bell />} title=\"Notifications\" trailing={<Switch />} />\\n</List>", language: "tsx" } },
+    docs: { source: { code: "<List>\\n  <ListItem\\n    leading={<User />}\\n    title=\"Profile\"\\n    description=\"Name, photo, and personal details\"\\n    onSelect={() => router.push(\"/profile\")}\\n  />\\n  <ListItem leading={<Bell />} title=\"Notifications\" trailing={<Switch aria-label=\"Notifications\" />} />\\n</List>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/MarkdownEditor.stories.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
     const [text, setText] = React.useState(
       "## Release notes\n\nShipped **MarkdownEditor** — a toolbar over a plain textarea, not `contenteditable`.\n\n- Bold, italic, links\n- Bulleted and numbered lists\n- An optional preview pane",
     );
-    return <MarkdownEditor className="w-full" value={text} onChange={setText} rows={8} />;
+    return <MarkdownEditor aria-label="Release notes" className="w-full" value={text} onChange={setText} rows={8} />;
   };
 
 const meta = {

package/src/stories/MultiSelect.stories.tsx

@@ -8,6 +8,7 @@ const Demo = () => {
     const [value, setValue] = React.useState(["react", "swiftui"]);
     return (
       <MultiSelect
+        aria-label="Platforms"
         className="w-full max-w-sm"
         value={value}
         onValueChange={setValue}

package/src/stories/NativeSelect.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { NativeSelect, NativeSelectOptGroup, NativeSelectOption, Select } from "@kinetixui/ui";
 
 const Demo = () => (
-    <NativeSelect className="max-w-xs" defaultValue="">
+    <NativeSelect aria-label="Fruit" className="max-w-xs" defaultValue="">
       <NativeSelectOption value="" disabled>
         Select a fruit…
       </NativeSelectOption>

package/src/stories/NumberInput.stories.tsx

@@ -6,7 +6,7 @@ import { NumberInput } from "@kinetixui/ui";
 
 const Demo = () => {
     const [v, setV] = React.useState(2);
-    return <NumberInput value={v} onChange={setV} min={0} max={10} className="w-32" />;
+    return <NumberInput aria-label="Quantity" value={v} onChange={setV} min={0} max={10} className="w-32" />;
   };
 
 const meta = {
@@ -18,12 +18,12 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<NumberInput value={qty} onChange={setQty} min={0} max={10} />", language: "tsx" } },
+    docs: { source: { code: "<NumberInput aria-label=\\\"Quantity\\\" value={qty} onChange={setQty} min={0} max={10} />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput {...args} className="w-32" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput aria-label="Quantity" {...args} className="w-32" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Progress.stories.tsx

@@ -10,7 +10,7 @@ const Demo = () => {
       const t = setTimeout(() => setV(66), 600);
       return () => clearTimeout(t);
     }, []);
-    return <Progress value={v} className="w-[60%]" />;
+    return <Progress value={v} aria-label="Upload progress" className="w-[60%]" />;
   };
 
 const meta = {
@@ -20,12 +20,12 @@ const meta = {
   argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} />", language: "tsx" } },
+    docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} aria-label=\\\"Upload progress\\\" />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress {...args} className="w-60" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress aria-label="Upload progress" {...args} className="w-60" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Select.stories.tsx

@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 
 const Demo = () => (
     <Select>
-      <SelectTrigger className="w-[220px]">
+      <SelectTrigger className="w-[220px]" aria-label="Fruit">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>
@@ -32,7 +32,7 @@ export default meta;
 
 export const Playground: StoryObj<typeof meta> = { render: (args) => (
     <Select {...args}>
-      <SelectTrigger className="w-[220px]">
+      <SelectTrigger className="w-[220px]" aria-label="Fruit">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>

package/src/stories/Slider.stories.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Slider } from "@kinetixui/ui";
 
-const Demo = () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
+const Demo = () => <Slider aria-label="Volume" defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
 
 const meta = {
   title: "Form Inputs/Slider",
@@ -13,12 +13,12 @@ const meta = {
   argTypes: { disabled: { control: "boolean" } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<Slider defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
+    docs: { source: { code: "<Slider aria-label=\"Volume\" defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider aria-label="Volume" {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Switch.stories.tsx

@@ -24,6 +24,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch aria-label="Airplane mode" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ToggleGroup.stories.tsx

@@ -7,9 +7,9 @@ import { Bold, Italic, Underline } from "lucide-react";
 
 const Demo = () => (
     <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
     </ToggleGroup>
   );
 
@@ -28,9 +28,9 @@ export default meta;
 
 export const Playground: StoryObj<typeof meta> = { render: (args) => (
     <ToggleGroup {...args}>
-      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
     </ToggleGroup>
   ) };
 

package/tailwind.config.ts

@@ -66,6 +66,20 @@ export default {
           "on-container": c("--semantic-on-info-container"),
         },
         tertiary: { DEFAULT: c("--tertiary"), foreground: c("--tertiary-foreground") },
+        // Role tokens layered over `primary` (which stays the shadcn-compatible source). `action`, `link`
+        // and `focus` default to it, so a theme that only sets `--primary` still works; override them
+        // individually to split the interactive colour, link colour and focus colour. `brand` is identity
+        // (logos, headers), not a control colour.
+        brand: { DEFAULT: c("--brand"), foreground: c("--brand-foreground") },
+        action: {
+          DEFAULT: c("--action"),
+          foreground: c("--action-foreground"),
+          // explicit states for native ports; on the web, hover/pressed derive from `action` (bg-action/90, /85)
+          hover: c("--action-hover"),
+          pressed: c("--action-pressed"),
+        },
+        link: c("--link"),
+        focus: c("--focus"),
         border: c("--border"),
         input: c("--input"),
         ring: c("--ring"),