@ai-matrx/design-system 0.49.18 → 0.49.19

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.49.19
+### Unreleased
+
+- **A table's view tabs are a valid tablist, and every tab action works from the keyboard** (a11y pass, /education/library 2026-09-28: axe `aria-required-children`, critical). `TableViewTabs` put the "+" button and every close "×" inside `role="tablist"`, so assistive tech was told a list of tabs held buttons. The tablist now holds only tabs; "+" sits right after it; each "×" stays beside its tab for the pointer but is `aria-hidden` and out of the tab order, and the tab itself owns the keyboard actions as the WAI-ARIA tabs pattern does: **Delete** closes a closable tab and **F2** renames a renameable one (announced through `aria-keyshortcuts`). Proof: `TableViewTabs.test.tsx`, 3 of 5 red on the previous source. Consumer action: a test that found a close button by role/name (`"Close <label>"`) queries `[data-close-tab]` or presses Delete on the tab instead.
+
 ## 0.49.18
 ### Unreleased
 

package/dist/data-table/index.cjs

@@ -36758,9 +36758,11 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
     if (id) onEditCancel?.(id);
     onEditDone?.();
   };
+  const canClose = (id) => closable && tabs.length > 1 && id !== "default";
+  const canRename = (id) => renameable && id !== "default";
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 shrink-0 items-center border-b", "data-matrx-table-tabs": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { role: "tablist", "aria-label": "Table views", className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: [
-      tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "group flex shrink-0 items-center border-r", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "tablist", "aria-label": "Table views", className: "flex shrink-0 items-center", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { role: "presentation", className: "group flex shrink-0 items-center border-r", children: [
         renaming === tab.id ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
@@ -36784,14 +36786,26 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             role: "tab",
             "aria-selected": tab.id === activeId,
             tabIndex: tab.id === activeId ? 0 : -1,
+            "aria-keyshortcuts": [canClose(tab.id) ? "Delete" : "", canRename(tab.id) ? "F2" : ""].filter(Boolean).join(" ") || void 0,
             onClick: () => onSelect(tab.id),
             onDoubleClick: () => {
-              if (renameable && tab.id !== "default") {
+              if (canRename(tab.id)) {
                 setDraft(tab.label);
                 setRenaming(tab.id);
               }
             },
             onKeyDown: (e) => {
+              if (e.key === "Delete" && canClose(tab.id)) {
+                e.preventDefault();
+                onClose(tab.id);
+                return;
+              }
+              if (e.key === "F2" && canRename(tab.id)) {
+                e.preventDefault();
+                setDraft(tab.label);
+                setRenaming(tab.id);
+                return;
+              }
               const next = e.key === "ArrowRight" ? (index + 1) % tabs.length : e.key === "ArrowLeft" ? (index + tabs.length - 1) % tabs.length : e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : -1;
               if (next >= 0) {
                 e.preventDefault();
@@ -36807,14 +36821,15 @@ function TableViewTabs({ tabs, activeId, onSelect, onAdd, onClose, onRename, rel
             ]
           }
         ),
-        closable && tabs.length > 1 && tab.id !== "default" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-label": `Close ${tab.label}`, onClick: () => onClose(tab.id), className: "flex size-7 items-center justify-center rounded hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(X, { className: "size-4" }) }) }),
+        canClose(tab.id) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-hidden": "true", tabIndex: -1, "data-close-tab": tab.id, onClick: () => onClose(tab.id), className: "flex size-7 items-center justify-center rounded hover:bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(X, { className: "size-4" }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TooltipContent, { children: [
             "Close ",
-            tab.label
+            tab.label,
+            " (Delete)"
           ] })
         ] })
-      ] }, tab.id)),
+      ] }, tab.id)) }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-label": "New table tab", onClick: onAdd, className: "flex size-8 shrink-0 items-center justify-center rounded hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Plus, { className: "size-4" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipContent, { children: addHint })