@crisp-ui-kit/crisp 0.23.2 → 0.23.4

package/dist/cjs/components/datatable/datatable.js

@@ -452,8 +452,22 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                 }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
                                     const Icon = col.icon;
+                                    // The sort direction was painted (`data-sorted`) and never
+                                    // announced: a screen reader heard the same header before and
+                                    // after sorting (#229). Only the PRIMARY sort is exposed —
+                                    // aria-sort is specified as one header per table, and with the
+                                    // multi-sort the `sort` prop allows, a second "ascending" says
+                                    // nothing about which column came first.
+                                    const sortable = col.sortable || !!columnMenu;
+                                    const ariaSort = !sortable
+                                        ? undefined
+                                        : sorts[0]?.key === col.key
+                                            ? sorts[0].dir === "asc"
+                                                ? "ascending"
+                                                : "descending"
+                                            : "none";
                                     const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
-                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), ...stickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
+                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);

package/dist/cjs/product/recordstable/recordstable.js

@@ -1002,7 +1002,11 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                         }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [(0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), cols.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key))), (0, jsx_runtime_1.jsx)("col", {})] }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-col-check", children: (0, jsx_runtime_1.jsx)("span", { className: "recordstable-check-inner", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
                                             const Icon = col.icon;
                                             const sc = sorts.find((s) => s.key === col.key);
-                                            return ((0, jsx_runtime_1.jsxs)("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
+                                            return ((0, jsx_runtime_1.jsxs)("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
+                                                    ? sorts[0].dir === "asc"
+                                                        ? "ascending"
+                                                        : "descending"
+                                                    : "none", "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
                                                     ? (e) => {
                                                         e.preventDefault();
                                                         reorderColumn(dragCol, col.key);
@@ -1041,7 +1045,13 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                             const canEdit = canEditCol(col);
                                             const isPicker = isPickerCol(col);
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
-                                            return ((0, jsx_runtime_1.jsxs)("td", { className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            // The first column is the record's NAME — it is what the row
+                                            // is, not a value the row has. As a `<th scope="row">` a
+                                            // screen reader reads "Google, Employees, 182,000" across the
+                                            // row instead of a bare "182,000", and the same header is
+                                            // repeated in every cell's context (#231).
+                                            const Cell = (i === 0 ? "th" : "td");
+                                            return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)

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

@@ -56,7 +56,10 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-addcol button:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
 
     /* cells */
-    & .recordstable-td { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; cursor: default; }
+    /* font-weight is explicit because the first cell of each row is a
+       th[scope=row] — the record's name is what the row IS — and a th
+       defaults to bold. Measured before the change and unchanged after: 400. */
+    & .recordstable-td { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; cursor: default; }
     & .recordstable-td--editable { cursor: text; }
     /* keyboard/click cell selection (spreadsheet-style) */
     & .recordstable-td[data-selected] { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; z-index: 3; }

package/dist/esm/components/datatable/datatable.js

@@ -416,8 +416,22 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                 }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
                                     const Icon = col.icon;
+                                    // The sort direction was painted (`data-sorted`) and never
+                                    // announced: a screen reader heard the same header before and
+                                    // after sorting (#229). Only the PRIMARY sort is exposed —
+                                    // aria-sort is specified as one header per table, and with the
+                                    // multi-sort the `sort` prop allows, a second "ascending" says
+                                    // nothing about which column came first.
+                                    const sortable = col.sortable || !!columnMenu;
+                                    const ariaSort = !sortable
+                                        ? undefined
+                                        : sorts[0]?.key === col.key
+                                            ? sorts[0].dir === "asc"
+                                                ? "ascending"
+                                                : "descending"
+                                            : "none";
                                     const inner = (_jsxs("span", { className: "datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
-                                    return (_jsxs(TableHead, { align: alignFor(col), ...stickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
+                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);

package/dist/esm/product/recordstable/recordstable.js

@@ -962,7 +962,11 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                         }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "recordstable-th recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
                                             const Icon = col.icon;
                                             const sc = sorts.find((s) => s.key === col.key);
-                                            return (_jsxs("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
+                                            return (_jsxs("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
+                                                    ? sorts[0].dir === "asc"
+                                                        ? "ascending"
+                                                        : "descending"
+                                                    : "none", "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
                                                     ? (e) => {
                                                         e.preventDefault();
                                                         reorderColumn(dragCol, col.key);
@@ -1001,7 +1005,13 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                             const canEdit = canEditCol(col);
                                             const isPicker = isPickerCol(col);
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
-                                            return (_jsxs("td", { className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            // The first column is the record's NAME — it is what the row
+                                            // is, not a value the row has. As a `<th scope="row">` a
+                                            // screen reader reads "Google, Employees, 182,000" across the
+                                            // row instead of a bare "182,000", and the same header is
+                                            // repeated in every cell's context (#231).
+                                            const Cell = (i === 0 ? "th" : "td");
+                                            return (_jsxs(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)

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

@@ -53,7 +53,10 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-addcol button:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
 
     /* cells */
-    & .recordstable-td { font-size: ${c.text.lg}; color: ${c.fgPrimary}; background: ${c.bgSurface}; cursor: default; }
+    /* font-weight is explicit because the first cell of each row is a
+       th[scope=row] — the record's name is what the row IS — and a th
+       defaults to bold. Measured before the change and unchanged after: 400. */
+    & .recordstable-td { font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; background: ${c.bgSurface}; cursor: default; }
     & .recordstable-td--editable { cursor: text; }
     /* keyboard/click cell selection (spreadsheet-style) */
     & .recordstable-td[data-selected] { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; border-radius: ${c.radius.sm}; z-index: 3; }

package/dist/recordstable.css

@@ -101,7 +101,10 @@
     & .recordstable-addcol button:hover { background: var(--bg-raised); color: var(--fg-primary); }
 
     /* cells */
-    & .recordstable-td { font-size: var(--text-lg); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
+    /* font-weight is explicit because the first cell of each row is a
+       th[scope=row] — the record's name is what the row IS — and a th
+       defaults to bold. Measured before the change and unchanged after: 400. */
+    & .recordstable-td { font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
     & .recordstable-td--editable { cursor: text; }
     /* keyboard/click cell selection (spreadsheet-style) */
     & .recordstable-td[data-selected] { outline: 2px solid var(--bg-brand-solid); outline-offset: -2px; border-radius: var(--radius-sm); z-index: 3; }

package/dist/styles.css

@@ -2499,7 +2499,10 @@
     & .recordstable-addcol button:hover { background: var(--bg-raised); color: var(--fg-primary); }
 
     /* cells */
-    & .recordstable-td { font-size: var(--text-lg); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
+    /* font-weight is explicit because the first cell of each row is a
+       th[scope=row] — the record's name is what the row IS — and a th
+       defaults to bold. Measured before the change and unchanged after: 400. */
+    & .recordstable-td { font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
     & .recordstable-td--editable { cursor: text; }
     /* keyboard/click cell selection (spreadsheet-style) */
     & .recordstable-td[data-selected] { outline: 2px solid var(--bg-brand-solid); outline-offset: -2px; border-radius: var(--radius-sm); z-index: 3; }

package/package.json

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