@kinetixui/ui 0.4.1 → 0.4.2

package/dist/index.d.ts

@@ -474,6 +474,14 @@ type ChartConfig = {
 declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
     children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    /**
+     * Text alternative for the chart (WCAG 1.1.1). A chart conveys its data by
+     * colour + position, which a screen reader can't relay — pass a one-line
+     * summary of what it shows and the trend. Falls back to "Chart".
+     * Cartesian charts should also get `accessibilityLayer` on the Recharts
+     * primitive for keyboard data-point navigation.
+     */
+    label?: string;
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -1120,6 +1128,9 @@ declare const Metric: React$1.ForwardRefExoticComponent<MetricProps & React$1.Re
 
 /**
  * NumberInput — a numeric field with increment / decrement controls.
+ * The wrapper shows `--shadow-focus` on `focus-within`; each stepper also
+ * draws its own `--ring` inset outline on `:focus-visible` so keyboard users
+ * can tell which control is focused.
  */
 interface NumberInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
     value?: number;

package/dist/index.js

@@ -1545,14 +1545,38 @@ function useChart() {
   if (!context) throw new Error("useChart must be used within a <ChartContainer />");
   return context;
 }
-var ChartContainer = React32.forwardRef(({ id, className, children, config, ...props }, ref) => {
+var ChartContainer = React32.forwardRef(({ id, className, children, config, label, role, "aria-label": ariaLabel, ...props }, ref) => {
   const uniqueId = React32.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const name = ariaLabel ?? label ?? "Chart";
+  const innerRef = React32.useRef(null);
+  const setRef = React32.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  React32.useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const scrub = () => {
+      el.querySelector(".recharts-surface")?.setAttribute("aria-label", name);
+      el.querySelectorAll('[role="img"]:not([data-chart])').forEach((n) => n.removeAttribute("role"));
+    };
+    scrub();
+    const mo = new MutationObserver(scrub);
+    mo.observe(el, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [name]);
   return /* @__PURE__ */ jsx37(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-chart": chartId,
-      ref,
+      ref: setRef,
+      role: role ?? "img",
+      "aria-label": name,
       className: cn(
         "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
         className
@@ -3530,7 +3554,7 @@ var NumberInput = React60.forwardRef(
               "aria-label": "Decrease",
               disabled: disabled || min != null && current <= min,
               onClick: () => set(current - step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx66(Minus3, { className: "size-4" })
             }
           ),
@@ -3560,7 +3584,7 @@ var NumberInput = React60.forwardRef(
               "aria-label": "Increase",
               disabled: disabled || max != null && current >= max,
               onClick: () => set(current + step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx66(Plus, { className: "size-4" })
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -89,7 +89,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.4.1",
+    "@kinetixui/tokens": "0.4.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/src/components/chart.tsx

@@ -27,16 +27,55 @@ const ChartContainer = React.forwardRef<
   React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    /**
+     * Text alternative for the chart (WCAG 1.1.1). A chart conveys its data by
+     * colour + position, which a screen reader can't relay — pass a one-line
+     * summary of what it shows and the trend. Falls back to "Chart".
+     * Cartesian charts should also get `accessibilityLayer` on the Recharts
+     * primitive for keyboard data-point navigation.
+     */
+    label?: string;
   }
->(({ id, className, children, config, ...props }, ref) => {
+>(({ id, className, children, config, label, role, "aria-label": ariaLabel, ...props }, ref) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const name = ariaLabel ?? label ?? "Chart";
+
+  const innerRef = React.useRef<HTMLDivElement | null>(null);
+  const setRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    },
+    [ref],
+  );
+
+  // The container carries the text alternative (role="img" + aria-label).
+  // Recharts additionally (a) tags individual sector / dot <path>s with
+  // role="img" and no <title> — redundant noise that fails axe's svg-img-alt —
+  // and (b) leaves its accessibilityLayer <svg role="application"> unnamed.
+  // Fix both on the rendered output; re-run on Recharts re-layout.
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const scrub = () => {
+      el.querySelector(".recharts-surface")?.setAttribute("aria-label", name);
+      el.querySelectorAll('[role="img"]:not([data-chart])').forEach((n) => n.removeAttribute("role"));
+    };
+    scrub();
+    const mo = new MutationObserver(scrub);
+    mo.observe(el, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [name]);
 
   return (
     <ChartContext.Provider value={{ config }}>
       <div
         data-chart={chartId}
-        ref={ref}
+        ref={setRef}
+        role={role ?? "img"}
+        aria-label={name}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,

package/src/components/number-input.tsx

@@ -6,6 +6,9 @@ import { cn } from "../lib/utils";
 
 /**
  * NumberInput — a numeric field with increment / decrement controls.
+ * The wrapper shows `--shadow-focus` on `focus-within`; each stepper also
+ * draws its own `--ring` inset outline on `:focus-visible` so keyboard users
+ * can tell which control is focused.
  */
 export interface NumberInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
@@ -48,7 +51,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           aria-label="Decrease"
           disabled={disabled || (min != null && current <= min)}
           onClick={() => set(current - step)}
-          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
         >
           <Minus className="size-4" />
         </button>
@@ -73,7 +76,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           aria-label="Increase"
           disabled={disabled || (max != null && current >= max)}
           onClick={() => set(current + step)}
-          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
         >
           <Plus className="size-4" />
         </button>