@optilogic/charts 1.3.11 → 1.4.1

package/dist/index.cjs

@@ -232,6 +232,13 @@ function resolveLegendConfig(legend) {
   if (legend === true) return { position: "top", align: "right" };
   return legend;
 }
+function formatCell(value) {
+  if (value == null) return "";
+  if (typeof value === "number") return value.toLocaleString();
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
 var ChartContainer = React17__namespace.forwardRef(function ChartContainer2({
   children,
   className,
@@ -240,8 +247,18 @@ var ChartContainer = React17__namespace.forwardRef(function ChartContainer2({
   empty,
   emptyMessage = "No data available",
   title,
-  description
+  description,
+  ariaLabel,
+  ariaDescription,
+  tableData,
+  tableColumns,
+  onRowActivate,
+  rowActionLabel
 }, ref) {
+  const descriptionId = React17__namespace.useId();
+  const accessibleName = ariaLabel ?? title;
+  const accessibleDescription = ariaDescription ?? description;
+  const hasTable = !loading && !empty && !!tableData && tableData.length > 0 && !!tableColumns && tableColumns.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: core.cn("w-full", className), style: { height }, children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 8 }, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -304,12 +321,51 @@ var ChartContainer = React17__namespace.forwardRef(function ChartContainer2({
         },
         children: emptyMessage
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.ResponsiveContainer,
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        width: "100%",
-        height: title || description ? "calc(100% - 40px)" : "100%",
-        children
+        role: "img",
+        "aria-label": accessibleName,
+        "aria-describedby": accessibleDescription ? descriptionId : void 0,
+        className: "relative",
+        style: {
+          width: "100%",
+          height: title || description ? "calc(100% - 40px)" : "100%"
+        },
+        children: [
+          accessibleDescription && /* @__PURE__ */ jsxRuntime.jsx(core.VisuallyHidden, { as: "span", id: descriptionId, children: accessibleDescription }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children }),
+          hasTable && /* @__PURE__ */ jsxRuntime.jsx(core.VisuallyHidden, { as: "div", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
+            accessibleName && /* @__PURE__ */ jsxRuntime.jsx("caption", { children: accessibleName }),
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: tableColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: col.label }, col.key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tableData.map((row, rowIndex) => {
+              const record = row;
+              return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: tableColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: formatCell(record[col.key]) }, col.key)) }, rowIndex);
+            }) })
+          ] }) }),
+          hasTable && onRowActivate && /* @__PURE__ */ jsxRuntime.jsx(
+            "nav",
+            {
+              "aria-label": `${accessibleName ?? "Chart"} data point links`,
+              className: "sr-only focus-within:not-sr-only focus-within:absolute focus-within:z-20 focus-within:top-1 focus-within:left-1 focus-within:flex focus-within:max-h-[calc(100%-0.5rem)] focus-within:flex-col focus-within:gap-1 focus-within:overflow-auto focus-within:rounded-md focus-within:border focus-within:border-border focus-within:bg-popover focus-within:p-2 focus-within:shadow-md",
+              children: tableData.map((row, rowIndex) => {
+                const record = row;
+                const firstKey = tableColumns[0]?.key;
+                const label = rowActionLabel?.(row, rowIndex) ?? (firstKey ? formatCell(record[firstKey]) : `Row ${rowIndex + 1}`);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRowActivate(row, rowIndex),
+                    className: "rounded px-1 py-0.5 text-left text-sm text-foreground underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: label
+                  },
+                  rowIndex
+                );
+              })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -362,6 +418,14 @@ function useLiveData(config = {}) {
 }
 
 // src/shared/formatters.ts
+function toCellValue(value) {
+  if (value == null) return null;
+  if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
+    return value;
+  }
+  if (value instanceof Date) return value;
+  return null;
+}
 var compactThresholds = [
   [1e9, "B"],
   [1e6, "M"],
@@ -428,6 +492,13 @@ var LineChart = React17__namespace.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -436,6 +507,9 @@ var LineChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Line chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin, children: [
           gridConfig && /* @__PURE__ */ jsxRuntime.jsx(
             recharts.CartesianGrid,
@@ -530,7 +604,8 @@ var BarChart = React17__namespace.forwardRef(
     className,
     height = "100%",
     margin = { top: 8, right: 12, left: 0, bottom: 4 },
-    loading
+    loading,
+    onDataPointClick
   }, ref) => {
     const gridConfig = React17__namespace.useMemo(() => {
       if (grid === false) return null;
@@ -541,6 +616,36 @@ var BarChart = React17__namespace.forwardRef(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
     const isHorizontal = layout === "horizontal";
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
+    const seriesScaleDomains = React17__namespace.useMemo(() => {
+      const domains = {};
+      for (const s of series) {
+        const cf = s.conditionalFormat;
+        if (cf?.type === "colorScale" && !cf.domain) {
+          domains[s.dataKey] = core.computeScaleDomain(
+            data.map((d) => toCellValue(d[s.dataKey]))
+          );
+        }
+      }
+      return domains;
+    }, [series, data]);
+    const resolveBarFill = (s, datum, fallback) => {
+      if (!s.conditionalFormat) return fallback;
+      const fmt = core.resolveCellFormat(
+        s.conditionalFormat,
+        toCellValue(datum[s.dataKey]),
+        datum,
+        seriesScaleDomains[s.dataKey]
+      );
+      const color = fmt?.background ?? fmt?.color;
+      return color ? core.resolveFormatColor(color) : fallback;
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -549,6 +654,13 @@ var BarChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Bar chart",
+        tableData: data,
+        tableColumns,
+        onRowActivate: onDataPointClick ? (_row, index) => {
+          const datum = data[index];
+          if (datum) onDataPointClick(datum, index);
+        } : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           recharts.BarChart,
           {
@@ -647,19 +759,36 @@ var BarChart = React17__namespace.forwardRef(
                   content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {})
                 }
               ),
-              series.map((s, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Bar,
-                {
-                  dataKey: s.dataKey,
-                  name: s.name,
-                  fill: getChartColor(index, s.color),
-                  stackId: s.stackId,
-                  radius: s.radius ?? 0,
-                  isAnimationActive: isAnimated,
-                  animationDuration: isAnimated ? 300 : 0
-                },
-                s.dataKey
-              ))
+              series.map((s, index) => {
+                const baseFill = getChartColor(index, s.color);
+                const interactive = !!onDataPointClick;
+                const perDatum = !!s.conditionalFormat || interactive;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Bar,
+                  {
+                    dataKey: s.dataKey,
+                    name: s.name,
+                    fill: baseFill,
+                    stackId: s.stackId,
+                    radius: s.radius ?? 0,
+                    isAnimationActive: isAnimated,
+                    animationDuration: isAnimated ? 300 : 0,
+                    onClick: interactive ? (_data, i) => {
+                      const datum = data[i];
+                      if (datum) onDataPointClick?.(datum, i);
+                    } : void 0,
+                    children: perDatum ? data.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.Cell,
+                      {
+                        fill: resolveBarFill(s, d, baseFill),
+                        cursor: interactive ? "pointer" : void 0
+                      },
+                      `${s.dataKey}-${i}`
+                    )) : null
+                  },
+                  s.dataKey
+                );
+              })
             ]
           }
         )
@@ -692,6 +821,13 @@ var AreaChart = React17__namespace.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -700,6 +836,9 @@ var AreaChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Area chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, margin, children: [
           /* @__PURE__ */ jsxRuntime.jsx("defs", { children: series.map((s, index) => {
             const color = getChartColor(index, s.color);
@@ -820,6 +959,22 @@ var ScatterChart = React17__namespace.forwardRef(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
     const hasZ = series.some((s) => s.zDataKey);
+    const zDataKey = series.find((s) => s.zDataKey)?.zDataKey;
+    const tableColumns = React17__namespace.useMemo(() => {
+      const cols = [
+        { key: "__series", label: "Series" },
+        { key: xAxis.dataKey, label: xAxis.name ?? xAxis.label ?? xAxis.dataKey },
+        { key: "y", label: yAxis?.name ?? yAxis?.label ?? "y" }
+      ];
+      if (zDataKey) cols.push({ key: zDataKey, label: zDataKey });
+      return cols;
+    }, [xAxis.dataKey, xAxis.name, xAxis.label, yAxis?.name, yAxis?.label, zDataKey]);
+    const tableData = React17__namespace.useMemo(
+      () => series.flatMap(
+        (s) => (s.data ?? []).map((point) => ({ __series: s.name, ...point }))
+      ),
+      [series]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -828,6 +983,9 @@ var ScatterChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !series.some((s) => s.data?.length),
+        ariaLabel: "Scatter chart",
+        tableData,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin, children: [
           gridConfig && /* @__PURE__ */ jsxRuntime.jsx(
             recharts.CartesianGrid,
@@ -929,6 +1087,13 @@ var ComposedChart = React17__namespace.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -937,6 +1102,9 @@ var ComposedChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Composed chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data, margin, children: [
           gridConfig && /* @__PURE__ */ jsxRuntime.jsx(
             recharts.CartesianGrid,
@@ -1115,6 +1283,13 @@ var WaterfallChart = React17__namespace.forwardRef(
     const posColor = positiveColor ?? getSemanticColor("positive");
     const negColor = negativeColor ?? getSemanticColor("negative");
     const totColor = totalColor ?? "hsl(var(--chart-3))";
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: "name", label: xAxis?.label ?? "Name" },
+        { key: "value", label: yAxis?.label ?? "Value" }
+      ],
+      [xAxis?.label, yAxis?.label]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -1123,6 +1298,9 @@ var WaterfallChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Waterfall chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: rows, margin, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             recharts.CartesianGrid,
@@ -1251,6 +1429,12 @@ var PieChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Pie chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             recharts.Pie,
@@ -1323,6 +1507,12 @@ var DonutChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: centerLabel ?? "Donut chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             recharts.Pie,
@@ -1415,6 +1605,13 @@ var RadarChart = React17__namespace.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17__namespace.useMemo(
+      () => [
+        { key: categoryKey, label: categoryKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [categoryKey, series]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -1423,6 +1620,9 @@ var RadarChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Radar chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.RadarChart, { data, margin, cx: "50%", cy: "50%", children: [
           /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarGrid, { stroke: "hsl(var(--divider))" }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1508,6 +1708,12 @@ var RadialBarChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Radial bar chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           recharts.RadialBarChart,
           {
@@ -1625,6 +1831,14 @@ var SankeyChart = React17__namespace.forwardRef(
     loading
   }, ref) => {
     const tooltipProps = resolveTooltipProps(tooltip);
+    const tableData = React17__namespace.useMemo(
+      () => (data?.links ?? []).map((link) => ({
+        source: data.nodes[link.source]?.name ?? String(link.source),
+        target: data.nodes[link.target]?.name ?? String(link.target),
+        value: link.value
+      })),
+      [data]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -1633,6 +1847,13 @@ var SankeyChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.nodes?.length,
+        ariaLabel: "Sankey diagram",
+        tableData,
+        tableColumns: [
+          { key: "source", label: "Source" },
+          { key: "target", label: "Target" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
           recharts.Sankey,
           {
@@ -1650,6 +1871,20 @@ var SankeyChart = React17__namespace.forwardRef(
   }
 );
 SankeyChart.displayName = "SankeyChart";
+function flattenTreemap(nodes) {
+  const rows = [];
+  const walk = (items) => {
+    for (const item of items) {
+      if (item.children && item.children.length > 0) {
+        walk(item.children);
+      } else {
+        rows.push({ name: item.name, value: item.value ?? null });
+      }
+    }
+  };
+  walk(nodes);
+  return rows;
+}
 function TreemapContent({
   x,
   y,
@@ -1663,6 +1898,7 @@ function TreemapContent({
   const fill = color ?? getChartColor(index);
   const showLabel = width > 40 && height > 20;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    name && /* @__PURE__ */ jsxRuntime.jsx("title", { children: name }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
       {
@@ -1703,11 +1939,11 @@ var TreemapChart = React17__namespace.forwardRef(
     live = false,
     className,
     height = "100%",
-    margin,
     loading
   }, ref) => {
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableData = React17__namespace.useMemo(() => flattenTreemap(data), [data]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ChartContainer,
       {
@@ -1716,6 +1952,12 @@ var TreemapChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Treemap chart",
+        tableData,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
           recharts.Treemap,
           {
@@ -1755,6 +1997,12 @@ var FunnelChart = React17__namespace.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Funnel chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Stage" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.FunnelChart, { margin, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.Funnel,
@@ -1995,9 +2243,13 @@ var GanttChart = React17__namespace.forwardRef(
                   const color = task.color ?? getChartColor(i);
                   const isHovered = hoveredId === task.id;
                   const progress = task.progress ?? 0;
+                  const taskLabel = `${task.name}, ${task.start.toLocaleDateString()} to ${task.end.toLocaleDateString()}${task.progress != null ? `, ${Math.round((task.progress ?? 0) * 100)}% complete` : ""}`;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     "g",
                     {
+                      tabIndex: 0,
+                      role: onTaskClick ? "button" : "img",
+                      "aria-label": taskLabel,
                       onMouseEnter: (e) => {
                         setHoveredId(task.id);
                         const rect = containerRef.current?.getBoundingClientRect();
@@ -2011,7 +2263,22 @@ var GanttChart = React17__namespace.forwardRef(
                         setHoveredId(null);
                         setTooltipInfo(null);
                       },
+                      onFocus: () => {
+                        setHoveredId(task.id);
+                        setTooltipInfo({ task, x: barX, y: barY });
+                      },
+                      onBlur: () => {
+                        setHoveredId(null);
+                        setTooltipInfo(null);
+                      },
+                      onKeyDown: (e) => {
+                        if (onTaskClick && (e.key === "Enter" || e.key === " ")) {
+                          e.preventDefault();
+                          onTaskClick(task);
+                        }
+                      },
                       onClick: () => onTaskClick?.(task),
+                      className: "focus:outline-none focus-visible:[outline:2px_solid_hsl(var(--ring))]",
                       style: { cursor: onTaskClick ? "pointer" : "default" },
                       children: [
                         i % 2 === 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2220,6 +2487,7 @@ var HeatmapChart = React17__namespace.forwardRef(
   }, ref) {
     const containerRef = React17__namespace.useRef(null);
     const [hoveredCell, setHoveredCell] = React17__namespace.useState(null);
+    const [focusedKey, setFocusedKey] = React17__namespace.useState(null);
     const [tooltipPos, setTooltipPos] = React17__namespace.useState({ x: 0, y: 0 });
     const { valueMap, minVal, maxVal } = React17__namespace.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
@@ -2302,9 +2570,15 @@ var HeatmapChart = React17__namespace.forwardRef(
                 const cx = labelColWidth + xi * cellSize;
                 const cy = 28 + yi * cellSize;
                 const cellData = { x: xLabel, y: yLabel, value: val ?? 0 };
+                const isInteractive = !!onCellClick;
+                const valueText = val != null ? valueFormatter ? valueFormatter(val) : val.toLocaleString() : "no value";
+                const cellLabel = `${yLabel}, ${xLabel}: ${valueText}`;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "g",
                   {
+                    role: isInteractive ? "button" : "img",
+                    tabIndex: 0,
+                    "aria-label": cellLabel,
                     onMouseEnter: (e) => {
                       setHoveredCell(cellData);
                       const rect = containerRef.current?.getBoundingClientRect();
@@ -2314,8 +2588,26 @@ var HeatmapChart = React17__namespace.forwardRef(
                       });
                     },
                     onMouseLeave: () => setHoveredCell(null),
+                    onFocus: () => {
+                      setHoveredCell(cellData);
+                      setFocusedKey(key);
+                      setTooltipPos({
+                        x: cx + cellSize / 2,
+                        y: cy
+                      });
+                    },
+                    onBlur: () => {
+                      setHoveredCell(null);
+                      setFocusedKey(null);
+                    },
                     onClick: () => onCellClick?.(cellData),
-                    style: { cursor: onCellClick ? "pointer" : "default" },
+                    onKeyDown: (e) => {
+                      if (isInteractive && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault();
+                        onCellClick?.(cellData);
+                      }
+                    },
+                    style: { cursor: onCellClick ? "pointer" : "default", outline: "none" },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "rect",
@@ -2327,8 +2619,8 @@ var HeatmapChart = React17__namespace.forwardRef(
                           rx: 3,
                           fill: val != null ? interpolateColor(t, colorScale) : "hsl(var(--muted))",
                           fillOpacity: val != null ? 0.85 : 0.3,
-                          stroke: hoveredCell?.x === xLabel && hoveredCell?.y === yLabel ? "hsl(var(--foreground))" : "none",
-                          strokeWidth: 1.5
+                          stroke: focusedKey === key ? "hsl(var(--ring))" : hoveredCell?.x === xLabel && hoveredCell?.y === yLabel ? "hsl(var(--foreground))" : "none",
+                          strokeWidth: focusedKey === key ? 2.5 : 1.5
                         }
                       ),
                       showValues && val != null && cellSize >= 32 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2958,6 +3250,18 @@ var labelStyle = {
   marginBottom: 3,
   display: "block"
 };
+var FOCUS_STYLE_ID = "opti-chart-builder-focus";
+var focusStyles = `
+.opti-chart-builder-control:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+`;
+function FocusStyles() {
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { id: FOCUS_STYLE_ID, children: focusStyles });
+}
+var FOCUS_CLASS = "opti-chart-builder-control";
 var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
   columns,
   data,
@@ -3000,6 +3304,7 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
       className: core.cn("flex gap-4", className),
       style: { minHeight: 400 },
       children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FocusStyles, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -3014,10 +3319,12 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "hsl(var(--foreground))" }, children: "Chart Builder" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Chart Type" }),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "cb-chart-type", style: labelStyle, children: "Chart Type" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "select",
                   {
+                    id: "cb-chart-type",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.type,
                     onChange: (e) => setConfig((prev) => ({ ...prev, type: e.target.value })),
@@ -3026,10 +3333,12 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                 )
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Category Axis" }),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "cb-category-axis", style: labelStyle, children: "Category Axis" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "select",
                   {
+                    id: "cb-category-axis",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.categoryKey,
                     onChange: (e) => setConfig((prev) => ({ ...prev, categoryKey: e.target.value })),
@@ -3037,8 +3346,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Series" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Series", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyle, children: "Series" }),
                 config.series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -3048,6 +3357,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "select",
                         {
+                          className: FOCUS_CLASS,
+                          "aria-label": `Series ${i + 1} data column`,
                           style: { ...selectStyle, flex: 1 },
                           value: s.dataKey,
                           onChange: (e) => updateSeries(i, "dataKey", e.target.value),
@@ -3057,6 +3368,9 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
+                          type: "button",
+                          "aria-label": `Remove series ${i + 1}`,
+                          className: FOCUS_CLASS,
                           onClick: () => removeSeries(i),
                           style: {
                             padding: "2px 6px",
@@ -3078,6 +3392,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
+                    type: "button",
+                    className: FOCUS_CLASS,
                     onClick: addSeries,
                     style: {
                       width: "100%",
@@ -3095,10 +3411,12 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                 )
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: "Legend" }),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "cb-legend", style: labelStyle, children: "Legend" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "select",
                   {
+                    id: "cb-legend",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.legend,
                     onChange: (e) => setConfig((prev) => ({ ...prev, legend: e.target.value })),
@@ -3112,6 +3430,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                   {
                     type: "checkbox",
                     id: "grid-toggle",
+                    "aria-label": "Show Grid",
+                    className: FOCUS_CLASS,
                     checked: config.grid,
                     onChange: (e) => setConfig((prev) => ({ ...prev, grid: e.target.checked }))
                   }
@@ -3124,6 +3444,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
                   {
                     type: "checkbox",
                     id: "animate-toggle",
+                    "aria-label": "Animate",
+                    className: FOCUS_CLASS,
                     checked: config.animate,
                     onChange: (e) => setConfig((prev) => ({ ...prev, animate: e.target.checked }))
                   }
@@ -3133,6 +3455,8 @@ var ChartBuilder = React17__namespace.memo(function ChartBuilder2({
               onSave && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
+                  type: "button",
+                  className: FOCUS_CLASS,
                   onClick: () => onSave(config),
                   style: {
                     marginTop: 8,