@heyramzi/ui 2.23.0 → 3.0.0

package/src/components/star-rating-input/star-rating-input.test.ts

@@ -0,0 +1,90 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it, vi } from "vite-plus/test";
+import StarRatingInput from "./star-rating-input.svelte";
+
+function render(props: Record<string, unknown> = {}) {
+  const onValueChange = vi.fn();
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(StarRatingInput, { target, props: { value: 0, onValueChange, ...props } });
+  flushSync();
+  const stars = target.querySelector<HTMLElement>(".stars");
+  if (!stars) throw new Error("StarRatingInput rendered no stars");
+  const key = (k: string) => {
+    stars.dispatchEvent(new KeyboardEvent("keydown", { key: k, bubbles: true, cancelable: true }));
+    flushSync();
+  };
+  return {
+    stars,
+    onValueChange,
+    key,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// The 10 Nov audit: arrows did nothing, zero was out of reach, and a read-only name left out the value.
+describe("StarRatingInput keyboard", () => {
+  it("is one slider from 0 to max that arrows step through", () => {
+    const { stars, onValueChange, key, done } = render({ value: 2 });
+    expect(stars.getAttribute("role")).toBe("slider");
+    expect(stars.tabIndex).toBe(0);
+    expect(stars.getAttribute("aria-valuemin")).toBe("0");
+    expect(stars.getAttribute("aria-valuemax")).toBe("5");
+    key("ArrowRight");
+    expect(stars.getAttribute("aria-valuenow")).toBe("3");
+    key("ArrowLeft");
+    key("ArrowDown");
+    expect(stars.getAttribute("aria-valuenow")).toBe("1");
+    expect(onValueChange.mock.calls.map(([v]) => v)).toEqual([3, 2, 1]);
+    done();
+  });
+
+  it("clears to zero with Home, and End goes to max", () => {
+    const { stars, onValueChange, key, done } = render({ value: 4 });
+    key("Home");
+    expect(stars.getAttribute("aria-valuenow")).toBe("0");
+    expect(stars.getAttribute("aria-valuetext")).toBe("No rating");
+    expect(onValueChange).toHaveBeenLastCalledWith(0);
+    key("End");
+    expect(stars.getAttribute("aria-valuenow")).toBe("5");
+    done();
+  });
+
+  it("clears to zero when the only lit star is clicked again", () => {
+    const { stars, onValueChange, done } = render({ value: 1 });
+    stars.querySelector<HTMLElement>("[data-value='1']")?.click();
+    flushSync();
+    expect(stars.getAttribute("aria-valuenow")).toBe("0");
+    expect(onValueChange).toHaveBeenLastCalledWith(0);
+    done();
+  });
+
+  it("reads the value and its label as the value text", () => {
+    const labels = ["Poor", "Fair", "Good", "Very good", "Excellent"];
+    const { stars, key, done } = render({ value: 3, labels, ariaLabel: "Rate the delivery" });
+    expect(stars.getAttribute("aria-label")).toBe("Rate the delivery");
+    expect(stars.getAttribute("aria-valuetext")).toBe("3 of 5 stars, Good");
+    key("4");
+    expect(stars.getAttribute("aria-valuetext")).toBe("4 of 5 stars, Very good");
+    done();
+  });
+
+  it("ignores keys while disabled and leaves the Tab order", () => {
+    const { stars, onValueChange, key, done } = render({ value: 2, disabled: true });
+    expect(stars.tabIndex).toBe(-1);
+    expect(stars.getAttribute("aria-disabled")).toBe("true");
+    key("ArrowRight");
+    expect(onValueChange).not.toHaveBeenCalled();
+    done();
+  });
+
+  it("names a read-only rating with its value", () => {
+    const { stars, done } = render({ value: 3, readonly: true });
+    expect(stars.getAttribute("role")).toBe("img");
+    expect(stars.getAttribute("aria-label")).toBe("Rating, 3 of 5 stars");
+    done();
+  });
+});

package/src/components/svg/svg.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src: string;
+    class?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/table-view/table-view.svelte

@@ -11,13 +11,14 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
+	import { CaretDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import * as Table from "../../shadcn/table/index.js";
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { Checkbox } from "../../shadcn/checkbox/index.js";
-	import { TableSkeleton } from "../data-table/index.js";
+	import { SortableHead, TableSkeleton } from "../data-table/index.js";
 	import { toggleSort, type SortState } from "../data-table/data-table.js";
+	import { MENU_KEYS, openMenuFromKey } from "../data-table/menu-key.js";
 
 	// =========================
 	// TYPES
@@ -55,7 +56,7 @@
 		selected?: Set<string>;
 		selectAllLabel?: string;
 		selectRowLabel?: (row: Row) => string;
-		/** The items of a right-click menu for one row: `ContextMenu.Item`s. */
+		/** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
 		rowMenu?: Snippet<[Row]>;
 		/** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
 		group?: (row: Row) => string | null;
@@ -67,7 +68,7 @@
 		collapsed?: Set<string>;
 		/** Draws a column head its own way, an icon or a colour. Print `column.label` for the plain case. */
 		head?: Snippet<[TableColumn<Row>]>;
-		/** The row opens in place. Click or Enter on the row, unless the target is a link, button or input inside it. */
+		/** The row opens in place, from a button over the row named like the row link. */
 		onRowClick?: (row: Row) => void;
 		/** Whether a row shows its `subRow`. */
 		expanded?: (row: Row) => boolean;
@@ -121,7 +122,9 @@
 	// =========================
 	// DERIVED
 	// =========================
-	let span = $derived(columns.length + (selectable ? 1 : 0));
+	// A row that opens has a last cell for its link or button.
+	let opens = $derived(Boolean(rowHref || onRowClick));
+	let span = $derived(columns.length + (selectable ? 1 : 0) + (opens ? 1 : 0));
 	// WHY a floor from the columns: with none, a 390px panel squeezed a text column until it broke
 	// "Handover" mid-word. A column hidden on small screens doesn't count, since it's gone there.
 	let floor = $derived.by(() => {
@@ -174,12 +177,6 @@
 		return value === null || value === undefined ? "" : String(value);
 	}
 
-	function ariaSort(column: TableColumn<Row>): "ascending" | "descending" | "none" | undefined {
-		if (!column.sortable) return undefined;
-		if (sort?.key !== column.key) return "none";
-		return sort.direction === "asc" ? "ascending" : "descending";
-	}
-
 	function toggleRow(row: Row, on: boolean) {
 		const next = new Set(selected);
 		if (on) next.add(rowKey(row));
@@ -218,13 +215,6 @@
 		onRowClick?.(row);
 	}
 
-	function rowKeydown(event: KeyboardEvent, row: Row) {
-		if (event.target !== event.currentTarget) return;
-		if (event.key !== "Enter" && event.key !== " ") return;
-		event.preventDefault();
-		onRowClick?.(row);
-	}
-
 	function linkClick(event: MouseEvent, row: Row) {
 		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
 			return;
@@ -274,7 +264,13 @@
 		<ContextMenu.Root>
 			<ContextMenu.Trigger>
 				{#snippet child({ props })}
-					{@render dataRow(row, props)}
+					<!-- A row with no link or button of its own takes focus itself, so the menu keys reach it. -->
+					{@render dataRow(row, {
+						...props,
+						tabindex: rowHref?.(row) || onRowClick ? props.tabindex : 0,
+						onkeydown: openMenuFromKey,
+						"aria-keyshortcuts": MENU_KEYS,
+					})}
 				{/snippet}
 			</ContextMenu.Trigger>
 			<ContextMenu.Content class="w-48">
@@ -292,16 +288,14 @@
 	<Table.Row
 		{...triggerProps}
 		data-state={isSelected ? "selected" : undefined}
-		tabindex={onRowClick ? 0 : undefined}
 		onclick={onRowClick ? (event: MouseEvent) => rowClick(event, row) : undefined}
-		onkeydown={onRowClick ? (event: KeyboardEvent) => rowKeydown(event, row) : undefined}
 		class={cn(
 			// Rows, not a card per row (DESIGN.md rule 19): a hairline under each and a flat
 			// hover tint. The atom's row lifts; this one does not.
 			"border-b border-border/70 last:border-b-0 hover:translate-y-0 hover:bg-foreground/3 hover:shadow-none",
-			href && "relative t-press active:bg-foreground/6",
-			onRowClick &&
-				"t-press active:bg-foreground/6 cursor-pointer outline-none focus-visible:shadow-(--ring-focus-inset)",
+			(href || onRowClick) && "relative t-press active:bg-foreground/6",
+			onRowClick && "cursor-pointer",
+			rowMenu && "outline-none focus-visible:shadow-(--ring-focus-inset)",
 			rowClass?.(row),
 		)}
 	>
@@ -325,11 +319,23 @@
 					class="absolute inset-0 z-0 outline-none focus-visible:shadow-(--ring-focus-inset)"
 				></a>
 			</td>
+		{:else if onRowClick}
+			<!-- The same overlay as a button, so a screen reader calls the row a control. -->
+			<td class="p-0">
+				<button
+					type="button"
+					aria-label={linkName(row)}
+					onclick={() => onRowClick(row)}
+					class="absolute inset-0 z-0 cursor-pointer outline-none focus-visible:shadow-(--ring-focus-inset)"
+				></button>
+			</td>
+		{:else if opens}
+			<td class="p-0"></td>
 		{/if}
 	</Table.Row>
 	{#if subRow && expanded?.(row)}
 		<Table.Row class="bg-foreground/2 hover:bg-foreground/2 hover:translate-y-0 hover:shadow-none">
-			<Table.Cell colspan={span + (rowHref ? 1 : 0)} class="whitespace-normal">
+			<Table.Cell colspan={span} class="whitespace-normal">
 				{@render subRow(row)}
 			</Table.Cell>
 		</Table.Row>
@@ -358,45 +364,37 @@
 					</Table.Head>
 				{/if}
 				{#each columns as column (column.key)}
-					<Table.Head
-						class={cn(
-							"whitespace-normal",
-							column.numeric && "text-end",
-							column.sortable && "h-8 p-0",
-							column.hideBelow && HIDE[column.hideBelow],
-							column.sticky && "bg-card sticky left-0 z-20",
-							column.headClass ?? column.class,
-						)}
-						style={column.width ? `width: ${column.width}` : undefined}
-						aria-sort={ariaSort(column)}
-					>
-						{#if column.sortable}
-							{@const dir = sort?.key === column.key ? sort.direction : null}
-							<button
-								type="button"
-								class={cn(
-									"t-press transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 flex h-8 w-full items-center gap-1 px-2 text-xs font-medium outline-none focus-visible:shadow-(--ring-focus-inset)",
-									column.numeric ? "justify-end" : "justify-start",
-								)}
-								onclick={() => (sort = toggleSort(sort, column.key as keyof Row & string))}
-							>
-								{#if head}{@render head(column)}{:else}{column.label}{/if}
-								{#if dir === "asc"}
-									<CaretUp class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else if dir === "desc"}
-									<CaretDown class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else}
-									<CaretUpDown class="text-muted-foreground size-3.5" aria-hidden="true" />
-								{/if}
-							</button>
-						{:else if head}
-							{@render head(column)}
-						{:else}
-							{column.label}
-						{/if}
-					</Table.Head>
+					{@const headClass = cn(
+						"whitespace-normal",
+						column.numeric && "text-end",
+						column.hideBelow && HIDE[column.hideBelow],
+						column.sticky && "bg-card sticky left-0 z-20",
+						column.headClass ?? column.class,
+					)}
+					{@const headStyle = column.width ? `width: ${column.width}` : undefined}
+					{#if column.sortable}
+						<!-- A sticky head keeps its card under the hover tint, or rows show through it. -->
+						<SortableHead
+							key={column.key as keyof Row & string}
+							{sort}
+							onSort={(key) => (sort = toggleSort(sort, key))}
+							numeric={column.numeric}
+							class={cn(
+								headClass,
+								column.sticky &&
+									"hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,var(--color-card))]",
+							)}
+							style={headStyle}
+						>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</SortableHead>
+					{:else}
+						<Table.Head class={headClass} style={headStyle}>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</Table.Head>
+					{/if}
 				{/each}
-				{#if rowHref}
+				{#if opens}
 					<th class="w-0 p-0"><span class="sr-only">Open</span></th>
 				{/if}
 			</Table.Row>
@@ -413,11 +411,7 @@
 							<Table.Row
 								class="bg-foreground/4 hover:translate-y-0 hover:bg-foreground/4 hover:shadow-none"
 							>
-								<Table.Head
-									colspan={span + (rowHref ? 1 : 0)}
-									scope="colgroup"
-									class="text-foreground h-8 p-0"
-								>
+								<Table.Head colspan={span} scope="colgroup" class="text-foreground h-8 p-0">
 									{#if collapsible}
 										<button
 											type="button"
@@ -456,16 +450,14 @@
 					{/each}
 					{#if rows.length === 0 && empty}
 						<Table.Row class="hover:bg-transparent hover:translate-y-0 hover:shadow-none">
-							<Table.Cell colspan={span + (rowHref ? 1 : 0)} class="whitespace-normal"
-								>{@render empty()}</Table.Cell
-							>
+							<Table.Cell colspan={span} class="whitespace-normal">{@render empty()}</Table.Cell>
 						</Table.Row>
 					{/if}
 				</Table.Body>
 			{/if}
 			{#if trailing}
 				<tbody>
-					<tr><td colspan={span + (rowHref ? 1 : 0)} class="p-0">{@render trailing()}</td></tr>
+					<tr><td colspan={span} class="p-0">{@render trailing()}</td></tr>
 				</tbody>
 			{/if}
 		{/if}
@@ -474,7 +466,7 @@
 				<Table.Row>
 					{#if selectable}<Table.Cell></Table.Cell>{/if}
 					{@render body(footer)}
-					{#if rowHref}<td></td>{/if}
+					{#if opens}<td></td>{/if}
 				</Table.Row>
 			</Table.Footer>
 		{/if}

package/src/components/table-view/table-view.svelte.d.ts

@@ -0,0 +1,96 @@
+import type { Snippet } from "svelte";
+import type { TableColumn } from "./types.js";
+export type TableCell<Row> = {
+    row: Row;
+    column: TableColumn<Row>;
+    value: unknown;
+    text: string;
+};
+export type TableGroup<Row> = {
+    key: string;
+    rows: Row[];
+};
+export type { TableColumn };
+import { type SortState } from "../data-table/data-table.js";
+declare function $$render<Row extends object>(): {
+    props: {
+        columns: TableColumn<Row>[];
+        rows: Row[];
+        /** What names a row, so a filter keeps its rows in place. */
+        rowKey: (row: Row) => string;
+        /** What the table is, for a screen reader. */
+        label: string;
+        /** A totals row, drawn under the body in the same columns. */
+        footer?: Row;
+        /** Draws a cell its own way. Print `text` for the plain case. */
+        cell?: Snippet<[TableCell<Row>]>;
+        rowClass?: (row: Row) => string | undefined;
+        /**
+         * Below this width the table scrolls sideways inside its frame. Defaults to the columns'
+         * own widths (8rem a text column, 5rem a number), so a phone scrolls rather than splits words.
+         * Pass "0" for a table that should squeeze.
+         */
+        minWidth?: string;
+        class?: string;
+        /** The sorted column and its direction. Bind it; columns with `sortable` set it. */
+        sort?: SortState<Row>;
+        /** Where a row goes. Draws a real link over the row, so middle-click and cmd-click work. */
+        rowHref?: (row: Row) => string | undefined;
+        /** Runs on a plain left click of the row link. Call `event.preventDefault()` to open in place; a modified click still follows `href`. */
+        onRowLink?: (row: Row, event: MouseEvent) => void;
+        /** The link's accessible name. Defaults to the row's first column text. */
+        rowLabel?: (row: Row) => string;
+        /** Adds a checkbox column with a select-all in the head. */
+        selectable?: boolean;
+        /** The `rowKey` of every checked row. Bind it. */
+        selected?: Set<string>;
+        selectAllLabel?: string;
+        selectRowLabel?: (row: Row) => string;
+        /** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
+        rowMenu?: Snippet<[Row]>;
+        /** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
+        group?: (row: Row) => string | null;
+        /** Draws a group's header. Prints the key when left out. */
+        groupHeader?: Snippet<[TableGroup<Row>]>;
+        /** Makes each group header a button that folds its rows. */
+        collapsible?: boolean;
+        /** The keys of the folded groups. Bind it. */
+        collapsed?: Set<string>;
+        /** Draws a column head its own way, an icon or a colour. Print `column.label` for the plain case. */
+        head?: Snippet<[TableColumn<Row>]>;
+        /** The row opens in place, from a button over the row named like the row link. */
+        onRowClick?: (row: Row) => void;
+        /** Whether a row shows its `subRow`. */
+        expanded?: (row: Row) => boolean;
+        /** A full-width row under the row, for detail. */
+        subRow?: Snippet<[Row]>;
+        /** Drawn across every column when there are no rows. */
+        empty?: Snippet;
+        /** Drawn across every column under the last row: a load-more sentinel or a spinner. */
+        trailing?: Snippet;
+        /** Draws placeholder rows in the same frame instead of `rows`. */
+        loading?: boolean;
+        skeletonRows?: number;
+    };
+    exports: {};
+    bindings: "sort" | "selected" | "collapsed";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "sort" | "selected" | "collapsed";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<Row extends object> = InstanceType<typeof $$Component<Row>>;
+export default $$Component;

package/src/components/table-view/table-view.test.ts

@@ -64,14 +64,21 @@ describe("TableView extensions", () => {
     { key: "total", label: "Total", numeric: true, sortable: true },
   ];
 
-  it("sorts from a head button and sets aria-sort", () => {
+  // The 10 Nov audit: the head took focus itself with no button inside, so it wasn't announced as a control.
+  it("sorts from a button in the head and sets aria-sort on the th", () => {
     const { target, done } = render({ columns: sortable, sort: { key: "name", direction: "asc" } });
-    const heads = target.querySelectorAll("thead th");
+    const heads = target.querySelectorAll<HTMLElement>("thead th");
     expect(heads[0].getAttribute("aria-sort")).toBe("ascending");
     expect(heads[1].getAttribute("aria-sort")).toBe("none");
-    (heads[1].querySelector("button") as HTMLButtonElement).click();
+    expect(heads[1].hasAttribute("tabindex")).toBe(false);
+    const button = heads[1].querySelector<HTMLButtonElement>("button");
+    expect(button?.textContent?.trim()).toBe("Total");
+    button?.click();
     flushSync();
     expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("ascending");
+    button?.click();
+    flushSync();
+    expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("descending");
     done();
   });
 
@@ -120,17 +127,39 @@ describe("TableView extensions", () => {
 });
 
 describe("TableView row actions", () => {
-  it("opens a row on click and Enter, but leaves a nested button alone", () => {
+  // The 10 Nov audit: a clickable row took focus as a bare tr, so a screen reader didn't call it a control.
+  it("opens a row from its own named button or a click, but leaves a nested button alone", () => {
     const calls: string[] = [];
     const cell = createRawSnippet<[{ text: string }]>((cellProps) => ({
       render: () => `<span><button>${cellProps().text}</button></span>`,
     }));
     const { target, done } = render({ onRowClick: (row: Row) => calls.push(row.id), cell });
     const tr = target.querySelector("tbody tr") as HTMLElement;
+    expect(tr.hasAttribute("tabindex")).toBe(false);
+    const open = tr.querySelector<HTMLButtonElement>("td:last-child > button[aria-label]");
+    expect(open?.getAttribute("aria-label")).toBe("Audit");
+    open?.click();
     tr.click();
-    tr.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
-    (tr.querySelector("button") as HTMLButtonElement).click();
+    (tr.querySelector("span > button") as HTMLButtonElement).click();
     expect(calls).toEqual(["a", "a"]);
+    expect(target.querySelectorAll("thead th").length).toBe(3);
+    done();
+  });
+
+  it("opens a row menu from Shift+F10 or the ContextMenu key on a focused row", () => {
+    const rowMenu = createRawSnippet(() => ({ render: () => `<span>Rename</span>` }));
+    const { target, done } = render({ rowMenu });
+    const tr = target.querySelector("tbody tr") as HTMLElement;
+    expect(tr.tabIndex).toBe(0);
+    expect(tr.getAttribute("aria-keyshortcuts")).toBe("Shift+F10 ContextMenu");
+    for (const init of [{ key: "F10", shiftKey: true }, { key: "ContextMenu" }]) {
+      const opened: Event[] = [];
+      tr.addEventListener("contextmenu", (event) => opened.push(event), { once: true });
+      const key = new KeyboardEvent("keydown", { ...init, bubbles: true, cancelable: true });
+      tr.dispatchEvent(key);
+      expect(key.defaultPrevented).toBe(true);
+      expect(opened.length).toBe(1);
+    }
     done();
   });