@crisp-ui-kit/crisp 0.12.0 → 0.13.0

package/dist/board.css

@@ -14,6 +14,13 @@
     & .board-card { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
     & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/cjs/product/board/board.js

@@ -43,36 +43,81 @@ const board_recipe_1 = require("./board.recipe");
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
+function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState("");
+    // the card a keyboard move just sent to another column; React unmounts and
+    // remounts it under the new parent, so focus has to be put back by hand
+    const [refocusId, setRefocusId] = React.useState(null);
+    const rootRef = React.useRef(null);
     const move = (cardId, toColumn) => {
         const card = cards.find((c) => c.id === cardId);
         if (!card || card.columnId === toColumn)
             return;
         onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: columns.map((col) => {
-            const colCards = cards.filter((c) => c.columnId === col.id);
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
-                    if (!dragId)
-                        return;
-                    e.preventDefault();
-                    setOverCol(col.id);
-                }, onDragLeave: (e) => {
-                    if (!e.currentTarget.contains(e.relatedTarget)) {
-                        setOverCol((v) => (v === col.id ? null : v));
-                    }
-                }, onDrop: (e) => {
-                    e.preventDefault();
-                    if (dragId)
-                        move(dragId, col.id);
-                    setDragId(null);
-                    setOverCol(null);
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
-                                    setDragId(null);
-                                    setOverCol(null);
-                                }, children: renderCard(card) }, card.id)))] })] }, col.id));
-        }) }));
+    React.useEffect(() => {
+        if (!refocusId)
+            return;
+        rootRef.current
+            ?.querySelector(`[data-card-id="${CSS.escape(refocusId)}"]`)
+            ?.focus();
+        setRefocusId(null);
+    }, [refocusId]);
+    /**
+     * Native HTML5 drag-and-drop is pointer-only by specification, so the board's
+     * primary action needs its own key model or it has none at all.
+     *
+     * Ctrl/Cmd + Left/Right rather than plain arrows: a screen reader owns the
+     * bare arrow keys in browse mode, and a board scrolls horizontally, so plain
+     * arrows on a focused card would fight both.
+     */
+    const moveByKey = (card, delta) => {
+        const from = columns.findIndex((c) => c.id === card.columnId);
+        const to = columns[from + delta];
+        if (from < 0 || !to)
+            return false;
+        move(card.id, to.id);
+        setAnnouncement(announceMove(to.title, getCardLabel?.(card)));
+        setRefocusId(card.id);
+        return true;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: [columns.map((col) => {
+                const colCards = cards.filter((c) => c.columnId === col.id);
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                        if (!dragId)
+                            return;
+                        e.preventDefault();
+                        setOverCol(col.id);
+                    }, onDragLeave: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                            setOverCol((v) => (v === col.id ? null : v));
+                        }
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        if (dragId)
+                            move(dragId, col.id);
+                        setDragId(null);
+                        setOverCol(null);
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", role: "listitem", 
+                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
+                                        setDragId(null);
+                                        setOverCol(null);
+                                    }, onKeyDown: (e) => {
+                                        if (!(e.ctrlKey || e.metaKey))
+                                            return;
+                                        const delta = e.key === "ArrowLeft"
+                                            ? -1
+                                            : e.key === "ArrowRight"
+                                                ? 1
+                                                : 0;
+                                        // only swallow the key when the move actually happens, so
+                                        // Ctrl+Right at the last column still reaches the browser
+                                        if (delta && moveByKey(card, delta))
+                                            e.preventDefault();
+                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+            }), (0, jsx_runtime_1.jsx)("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

package/dist/cjs/product/board/board.recipe.js

@@ -22,7 +22,14 @@ const config = (0, core_1.defineRecipe)({
     & .board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }`,
+    & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/board/board.js

@@ -7,36 +7,81 @@ import { boardRecipe } from "./board.recipe.js";
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState("");
+    // the card a keyboard move just sent to another column; React unmounts and
+    // remounts it under the new parent, so focus has to be put back by hand
+    const [refocusId, setRefocusId] = React.useState(null);
+    const rootRef = React.useRef(null);
     const move = (cardId, toColumn) => {
         const card = cards.find((c) => c.id === cardId);
         if (!card || card.columnId === toColumn)
             return;
         onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
     };
-    return (_jsx("div", { className: boardRecipe({ className }), ...rest, children: columns.map((col) => {
-            const colCards = cards.filter((c) => c.columnId === col.id);
-            return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
-                    if (!dragId)
-                        return;
-                    e.preventDefault();
-                    setOverCol(col.id);
-                }, onDragLeave: (e) => {
-                    if (!e.currentTarget.contains(e.relatedTarget)) {
-                        setOverCol((v) => (v === col.id ? null : v));
-                    }
-                }, onDrop: (e) => {
-                    e.preventDefault();
-                    if (dragId)
-                        move(dragId, col.id);
-                    setDragId(null);
-                    setOverCol(null);
-                }, children: [_jsxs("div", { className: "board-col-header", children: [col.accent && (_jsx("span", { className: "board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "board-col-title", children: col.title }), _jsx("span", { className: "board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "board-col-body", children: [onNewCard && (_jsxs("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "board-card", draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
-                                    setDragId(null);
-                                    setOverCol(null);
-                                }, children: renderCard(card) }, card.id)))] })] }, col.id));
-        }) }));
+    React.useEffect(() => {
+        if (!refocusId)
+            return;
+        rootRef.current
+            ?.querySelector(`[data-card-id="${CSS.escape(refocusId)}"]`)
+            ?.focus();
+        setRefocusId(null);
+    }, [refocusId]);
+    /**
+     * Native HTML5 drag-and-drop is pointer-only by specification, so the board's
+     * primary action needs its own key model or it has none at all.
+     *
+     * Ctrl/Cmd + Left/Right rather than plain arrows: a screen reader owns the
+     * bare arrow keys in browse mode, and a board scrolls horizontally, so plain
+     * arrows on a focused card would fight both.
+     */
+    const moveByKey = (card, delta) => {
+        const from = columns.findIndex((c) => c.id === card.columnId);
+        const to = columns[from + delta];
+        if (from < 0 || !to)
+            return false;
+        move(card.id, to.id);
+        setAnnouncement(announceMove(to.title, getCardLabel?.(card)));
+        setRefocusId(card.id);
+        return true;
+    };
+    return (_jsxs("div", { ref: rootRef, className: boardRecipe({ className }), ...rest, children: [columns.map((col) => {
+                const colCards = cards.filter((c) => c.columnId === col.id);
+                return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                        if (!dragId)
+                            return;
+                        e.preventDefault();
+                        setOverCol(col.id);
+                    }, onDragLeave: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                            setOverCol((v) => (v === col.id ? null : v));
+                        }
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        if (dragId)
+                            move(dragId, col.id);
+                        setDragId(null);
+                        setOverCol(null);
+                    }, children: [_jsxs("div", { className: "board-col-header", children: [col.accent && (_jsx("span", { className: "board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "board-col-title", children: col.title }), _jsx("span", { className: "board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "board-card", role: "listitem", 
+                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
+                                        setDragId(null);
+                                        setOverCol(null);
+                                    }, onKeyDown: (e) => {
+                                        if (!(e.ctrlKey || e.metaKey))
+                                            return;
+                                        const delta = e.key === "ArrowLeft"
+                                            ? -1
+                                            : e.key === "ArrowRight"
+                                                ? 1
+                                                : 0;
+                                        // only swallow the key when the move actually happens, so
+                                        // Ctrl+Right at the last column still reaches the browser
+                                        if (delta && moveByKey(card, delta))
+                                            e.preventDefault();
+                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+            }), _jsx("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

package/dist/esm/product/board/board.recipe.js

@@ -19,7 +19,14 @@ const config = defineRecipe({
     & .board-newcard:hover { background: color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; }
     & .board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }`,
+    & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/styles.css

@@ -1950,6 +1950,13 @@
     & .board-card { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
     & .board-card:active { cursor: grabbing; }
     & .board-card[data-dragging] { opacity: 0.4; }
+    & .board-card:focus { outline: none; }
+    & .board-card:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
+    /* announced, never drawn */
+    & .board-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/types/product/board/board.d.ts

@@ -18,6 +18,14 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
     /** When set, each column shows a "+ {newCardLabel}" button and its header +. */
     onNewCard?: (columnId: string) => void;
     newCardLabel?: string;
+    /**
+     * Accessible name for a card. Also used in the move announcement. Without it
+     * a card is announced by whatever `renderCard` puts in it, which is usually
+     * right but is not something the component can guarantee.
+     */
+    getCardLabel?: (card: T) => string;
+    /** What a screen reader hears after a keyboard move. */
+    announceMove?: (columnTitle: string, cardLabel?: string) => string;
     className?: string;
 };
 /**
@@ -26,7 +34,7 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, className, ...rest }: BoardProps<T>): React.JSX.Element;
+export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, getCardLabel, announceMove, className, ...rest }: BoardProps<T>): React.JSX.Element;
 export declare namespace Board {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",