@kinetixui/ui 0.17.0 → 0.19.0

package/src/components-keyboard.test.tsx

@@ -4,7 +4,9 @@ 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 { DataGrid, type DataGridColumn } from "./components/data-grid";
+import { FileUpload } from "./components/file-upload";
+import { List, ListItem } from "./components/list";
+import { DataGrid, type DataGridColumn, type DataGridSelection } from "./components/data-grid";
 import { KinetixDirectionProvider } from "./components/direction-provider";
 import {
   Dialog,
@@ -432,84 +434,376 @@ 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;
+      selectable?: boolean;
+      onSelectionChange?: (s: DataGridSelection | null) => void;
+    } = {},
+  ) {
+    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}
+        selectable={opts.selectable}
+        onSelectionChange={opts.onSelectionChange}
+      />
+    );
+    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();
   });
 
-  // 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("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");
+  });
+
+  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("range selection (opt-in)", () => {
+    const selectedCells = () => screen.getAllByRole("gridcell").filter((c) => c.getAttribute("aria-selected") === "true");
+
+    it("is off by default: no aria-multiselectable, no aria-selected, Shift+Arrow just moves", async () => {
+      const user = userEvent.setup();
+      setup();
+      expect(screen.getByRole("grid")).not.toHaveAttribute("aria-multiselectable");
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(cell(1, 0)).toHaveFocus();
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+    });
+
+    it("declares the grid multi-selectable and marks every cell selected=false until something is selected", async () => {
+      setup({ selectable: true });
+      expect(screen.getByRole("grid")).toHaveAttribute("aria-multiselectable", "true");
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "false");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+Arrow extends a rectangle from the anchor and reports it", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // Name, row 0 (anchor)
+      await user.keyboard("{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+
+      expect(selectedCells()).toHaveLength(4); // rows 0-1 x Name, ID
+      expect(cell(1, 1)).toHaveFocus();
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"] });
+      expect(screen.getByRole("status")).toHaveTextContent("4 cells selected");
+    });
+
+    it("shrinks when Shift moves back toward the anchor", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowDown}{/Shift}");
+      expect(selectedCells()).toHaveLength(3);
+      await user.keyboard("{Shift>}{ArrowUp}{/Shift}");
+      expect(selectedCells()).toHaveLength(2);
+    });
+
+    it("a plain arrow key collapses the selection", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowDown}");
+      expect(selectedCells()).toHaveLength(0);
+      expect(onSelectionChange).toHaveBeenLastCalledWith(null);
+    });
+
+    it("Ctrl+A selects every cell; Escape clears it", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard("{Control>}a{/Control}");
+      expect(selectedCells()).toHaveLength(6); // 3 rows x 2 columns
+      await user.keyboard("{Escape}");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+click extends from the previously active cell", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active: row 0, Name
+      await user.keyboard("{Shift>}");
+      await user.click(cell(2, 1));
+      await user.keyboard("{/Shift}");
+      expect(selectedCells()).toHaveLength(6);
+    });
+
+    it("a plain click clears the selection", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.click(cell(2, 0));
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Ctrl+C copies the range as tab-separated values", async () => {
+      const user = userEvent.setup();
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+      await user.keyboard("{Control>}c{/Control}");
+      expect(writeText).toHaveBeenCalledWith("Cara\t1\nAbe\t2");
+      expect(screen.getByRole("status")).toHaveTextContent("Copied 4 cells");
+    });
+
+    it("Shift+click extends from the anchor even after it has scrolled out of the rendered window", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      const many = Array.from({ length: 300 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
+      setup({ selectable: true, data: many, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active + anchor: row 0
+      const grid = screen.getByRole("grid");
+      grid.scrollTop = 4000;
+      grid.dispatchEvent(new Event("scroll"));
+      await waitFor(() => expect(screen.queryByText("Person 1")).not.toBeInTheDocument());
+
+      const target = screen.getAllByRole("gridcell").find((c) => c.getAttribute("data-cell")?.endsWith(":name"))!;
+      const targetRow = Number(target.getAttribute("data-cell")!.split(":")[0]);
+      expect(targetRow).toBeGreaterThan(50);
+
+      await user.keyboard("{Shift>}");
+      await user.click(target);
+      await user.keyboard("{/Shift}");
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, targetRow], columns: ["name"] });
+    });
+
+    it("re-sorting clears the selection (it refers to displayed rows)", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowUp}{ArrowUp}{Enter}"); // Name header, sort
+      expect(selectedCells()).toHaveLength(0);
+    });
+  });
+
+  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 +863,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/DataGrid.stories.tsx

@@ -19,6 +19,7 @@ const Demo = () => {
     return (
       <DataGrid
         className="w-full"
+        selectable
         height={280}
         data={data}
         getRowId={(row) => row.id}
@@ -45,7 +46,7 @@ const meta = {
   title: "Data Display/DataGrid",
   parameters: {
     layout: "padded",
-    docs: { source: { code: "<DataGrid\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
+    docs: { source: { code: "<DataGrid\\n  selectable\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

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 /> };