@astryxdesign/lab 0.2.0-canary.f306f13 → 0.2.0-canary.fc53ff7

package/dist/Chart/Chart.d.ts

@@ -5,6 +5,10 @@
  *
  * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
  * by margins. Children receive scales and dimensions via context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table so screen reader users can read the underlying values.
  */
 import { type ReactNode } from 'react';
 import type { ChartMargin } from './types';
@@ -58,6 +62,13 @@ export interface ChartProps {
      * interference on mobile.
      */
     interactive?: boolean;
+    /**
+     * Accessible name for the chart, announced by screen readers (the svg is
+     * exposed as `role="img"`). Defaults to an English description derived from
+     * the keys (e.g. "Chart of revenue by month") — pass a localized string to
+     * override.
+     */
+    label?: string;
     /** Chart contents — axes, marks, tooltips */
     children: ReactNode;
 }
@@ -73,5 +84,5 @@ export interface ChartProps {
  * </Chart>
  * ```
  */
-export declare function Chart({ data, xKey, yKeys, height, margin: marginOverride, yBaseline, yDomain: yDomainProp, xDomain: xDomainProp, interactive, children, }: ChartProps): import("react").JSX.Element;
+export declare function Chart({ data, xKey, yKeys, height, margin: marginOverride, yBaseline, yDomain: yDomainProp, xDomain: xDomainProp, interactive, label, children, }: ChartProps): import("react").JSX.Element;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,+BA6MZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA+OZ"}

package/dist/Chart/Chart.js

@@ -7,10 +7,15 @@
  *
  * Handles the d3 margin convention: outer SVG at full size, inner <g> translated
  * by margins. Children receive scales and dimensions via context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table so screen reader users can read the underlying values.
  */
 
 import { useMemo, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { isBandScale } from "./utils.js";
 import { ChartProvider } from "./ChartContext.js";
 
@@ -28,6 +33,18 @@ const DEFAULT_MARGIN = {
   left: 48
 };
 
+/**
+ * Maximum number of data points (rows × series) for which the visually hidden
+ * data-table fallback is rendered. Beyond this a table is more noise than
+ * signal for screen reader users, so larger charts are name-only.
+ */
+const MAX_TABLE_POINTS = 100;
+
+/** Stringify a cell value for the hidden data table. */
+function tableCell(value) {
+  return value == null ? '' : String(value);
+}
+
 /**
  * Root chart container. Computes scales from data and provides them to children.
  *
@@ -50,6 +67,7 @@ export function Chart({
   yDomain: yDomainProp,
   xDomain: xDomainProp,
   interactive = false,
+  label,
   children
 }) {
   const containerRef = useRef(null);
@@ -215,11 +233,15 @@ export function Chart({
     touchAction: interactive ? 'none' : undefined,
     userSelect: interactive ? 'none' : undefined
   };
-  return /*#__PURE__*/_jsx("div", {
+  const accessibleLabel = label ?? `Chart of ${yKeys.join(', ')} by ${xKey}`;
+  const showDataTable = data.length > 0 && data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
+  return /*#__PURE__*/_jsxs("div", {
     ref: containerRef,
     style: containerStyle,
-    children: containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
+    children: [containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,
+      role: "img",
+      "aria-label": accessibleLabel,
       width: containerWidth,
       height: height,
       style: interactive ? {
@@ -242,6 +264,32 @@ export function Chart({
           children: children
         })
       })]
-    })
+    }), showDataTable && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      children: /*#__PURE__*/_jsxs("table", {
+        children: [/*#__PURE__*/_jsx("caption", {
+          children: `${accessibleLabel} data`
+        }), /*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: xKey
+            }), yKeys.map(key => /*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: key
+            }, key))]
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: data.map((d, i) => /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "row",
+              children: tableCell(d[xKey])
+            }), yKeys.map(key => /*#__PURE__*/_jsx("td", {
+              children: tableCell(d[key])
+            }, key))]
+          }, i))
+        })]
+      })
+    })]
   });
 }

package/dist/CodeEditor/CodeEditor.d.ts

@@ -23,12 +23,24 @@ export interface CodeEditorProps extends Omit<BaseProps<HTMLDivElement>, 'onChan
     size?: 'sm' | 'md';
     /** Custom tokenizer */
     tokenizer?: (code: string, language: string) => TokenLine[];
+    /**
+     * Hint exposed to assistive technology (via aria-describedby) explaining
+     * how to move focus out of the editor. English default — the lab package
+     * has no i18n catalog yet, so override this prop to localize.
+     * @default 'Press Escape then Tab to move focus out of the editor.'
+     */
+    escapeHint?: string;
 }
 /**
  * An editable code input using contentEditable="plaintext-only".
  *
  * Uses CSS Custom Highlight API for syntax coloring. Supports
- * auto-indent, tab insertion, and bracket auto-closing.
+ * auto-indent, tab insertion, Shift+Tab outdent, and bracket auto-closing.
+ *
+ * Because Tab is captured for indentation, pressing Escape arms a one-shot
+ * "tab moves focus" mode so keyboard users can leave the editor (WCAG 2.1.2).
+ * The escape is advertised to assistive technology via a visually hidden
+ * aria-describedby hint (see `escapeHint`).
  *
  * @example
  * ```
@@ -42,7 +54,7 @@ export interface CodeEditorProps extends Omit<BaseProps<HTMLDivElement>, 'onChan
  * />
  * ```
  */
-export declare function CodeEditor({ value, onChange, language, hasLineNumbers, isReadOnly, placeholder, maxHeight, size, tokenizer: customTokenizer, label, xstyle, className, style, ref, ...props }: CodeEditorProps): import("react").JSX.Element;
+export declare function CodeEditor({ value, onChange, language, hasLineNumbers, isReadOnly, placeholder, maxHeight, size, tokenizer: customTokenizer, label, escapeHint, xstyle, className, style, ref, ...props }: CodeEditorProps): import("react").JSX.Element;
 export declare namespace CodeEditor {
     var displayName: string;
 }

package/dist/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAiBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CAC7D;AA6BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAkQjB;yBAlRe,UAAU"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,KAAK,EACL,UAAqE,EACrE,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAwUjB;yBAzVe,UAAU"}

package/dist/CodeEditor/CodeEditor.js

@@ -2,7 +2,8 @@
 
 /**
  * @file CodeEditor.tsx
- * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API,
+ *   VisuallyHidden (core)
  * @output Exports CodeEditor component and CodeEditorProps
  * @position Core implementation; editable code input (lab/experimental)
  *
@@ -14,7 +15,8 @@
 
 'use client';
 
-import { useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useRef, useCallback, useState } from 'react';
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, radiusVars, textSizeVars, typographyVars, typeScaleVars, borderVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -116,6 +118,41 @@ const AUTO_CLOSE_PAIRS = {
   "'": "'",
   '`': '`'
 };
+
+/**
+ * Modifier keys that must NOT re-arm Tab indentation after Escape has armed
+ * "tab moves focus" mode — otherwise the Shift keydown that precedes
+ * Shift+Tab would cancel the mode before Tab arrives.
+ */
+const MODE_NEUTRAL_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'CapsLock']);
+
+/** Place a collapsed caret at a character offset within an element's text. */
+function setCaretAtTextOffset(el, offset) {
+  const sel = window.getSelection();
+  if (!sel) {
+    return;
+  }
+  const range = document.createRange();
+  let remaining = offset;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
+  while (node) {
+    const length = node.textContent?.length ?? 0;
+    if (remaining <= length) {
+      range.setStart(node, remaining);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      return;
+    }
+    remaining -= length;
+    node = walker.nextNode();
+  }
+  range.selectNodeContents(el);
+  range.collapse(false);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
 let editorInstanceCounter = 0;
 
 // ---------------------------------------------------------------------------
@@ -126,7 +163,12 @@ let editorInstanceCounter = 0;
  * An editable code input using contentEditable="plaintext-only".
  *
  * Uses CSS Custom Highlight API for syntax coloring. Supports
- * auto-indent, tab insertion, and bracket auto-closing.
+ * auto-indent, tab insertion, Shift+Tab outdent, and bracket auto-closing.
+ *
+ * Because Tab is captured for indentation, pressing Escape arms a one-shot
+ * "tab moves focus" mode so keyboard users can leave the editor (WCAG 2.1.2).
+ * The escape is advertised to assistive technology via a visually hidden
+ * aria-describedby hint (see `escapeHint`).
  *
  * @example
  * ```
@@ -151,6 +193,7 @@ export function CodeEditor({
   size = 'md',
   tokenizer: customTokenizer,
   label,
+  escapeHint = 'Press Escape then Tab to move focus out of the editor.',
   xstyle,
   className,
   style,
@@ -161,6 +204,10 @@ export function CodeEditor({
   const [instanceId] = useState(() => ++editorInstanceCounter);
   const [focused, setFocused] = useState(false);
   const isComposingRef = useRef(false);
+  // One-shot "tab moves focus" mode, armed by Escape (WCAG 2.1.2 — the
+  // standard escape from a code editor's Tab-to-indent keyboard trap).
+  const tabMovesFocusRef = useRef(false);
+  const hintId = useId();
   const lines = value.split('\n');
 
   // Sync textContent with controlled value
@@ -243,13 +290,56 @@ export function CodeEditor({
       return;
     }
 
-    // Tab key: insert 2 spaces
+    // Escape arms one-shot "tab moves focus" mode so keyboard users can
+    // leave the editor. Only engage when nothing inside the editor (e.g.
+    // an embedded popover/autocomplete) already consumed the Escape.
+    if (e.key === 'Escape') {
+      if (!e.defaultPrevented) {
+        tabMovesFocusRef.current = true;
+      }
+      return;
+    }
     if (e.key === 'Tab') {
+      // Tab-moves-focus mode: let the browser handle Tab / Shift+Tab
+      // natively so focus leaves the editor. One-shot — disarm.
+      if (tabMovesFocusRef.current) {
+        tabMovesFocusRef.current = false;
+        return;
+      }
       e.preventDefault();
       const sel = window.getSelection();
       if (!sel || sel.rangeCount === 0) {
         return;
       }
+      const el = editorRef.current;
+      if (!el) {
+        return;
+      }
+
+      // Shift+Tab: outdent — remove up to two leading spaces on the
+      // current line.
+      if (e.shiftKey) {
+        const range = sel.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(el);
+        preCaretRange.setEnd(range.startContainer, range.startOffset);
+        const cursorOffset = preCaretRange.toString().length;
+        const fullText = el.textContent ?? '';
+        const lineStart = fullText.lastIndexOf('\n', cursorOffset - 1) + 1;
+        const line = fullText.slice(lineStart);
+        const removeCount = line.startsWith('  ') ? 2 : line.startsWith(' ') ? 1 : 0;
+        if (removeCount === 0) {
+          return;
+        }
+        const newText = fullText.slice(0, lineStart) + fullText.slice(lineStart + removeCount);
+        el.textContent = newText;
+        const removedBeforeCursor = Math.min(removeCount, Math.max(0, cursorOffset - lineStart));
+        setCaretAtTextOffset(el, cursorOffset - removedBeforeCursor);
+        onChange(newText);
+        return;
+      }
+
+      // Tab: insert 2 spaces
       const range = sel.getRangeAt(0);
       range.deleteContents();
       const textNode = document.createTextNode('  ');
@@ -258,13 +348,17 @@ export function CodeEditor({
       range.setEndAfter(textNode);
       sel.removeAllRanges();
       sel.addRange(range);
-      const el = editorRef.current;
-      if (el) {
-        onChange(el.textContent ?? '');
-      }
+      onChange(el.textContent ?? '');
       return;
     }
 
+    // Any other non-modifier key re-arms Tab indentation. Modifiers are
+    // excluded so Escape → Shift+Tab still moves focus backward (the
+    // Shift keydown fires before the Tab keydown).
+    if (!MODE_NEUTRAL_KEYS.has(e.key)) {
+      tabMovesFocusRef.current = false;
+    }
+
     // Enter key: preserve indentation
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -383,14 +477,21 @@ export function CodeEditor({
           "aria-multiline": "true",
           "aria-label": label,
           "aria-readonly": isReadOnly,
+          "aria-describedby": isReadOnly ? undefined : hintId,
           spellCheck: false,
           onInput: handleInput,
           onKeyDown: handleKeyDown,
           onFocus: () => setFocused(true),
-          onBlur: () => setFocused(false),
+          onBlur: () => {
+            setFocused(false);
+            tabMovesFocusRef.current = false;
+          },
           onCompositionStart: handleCompositionStart,
           onCompositionEnd: handleCompositionEnd,
           ...stylex.props(styles.editor, sizeStyle)
+        }), !isReadOnly && /*#__PURE__*/_jsx(VisuallyHidden, {
+          id: hintId,
+          children: escapeHint
         })]
       })]
     })

package/dist/Radial/RadialChart.d.ts

@@ -5,6 +5,10 @@
  *
  * Owns the radial coordinate space: center, radius, angle/radius scales.
  * Same Tier 1 guarantee as Chart — all children map through the same context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table (slices in pie mode, axis values in spider mode).
  */
 import { type ReactNode } from 'react';
 export interface RadialChartProps {
@@ -40,6 +44,13 @@ export interface RadialChartProps {
      * Enable touch interaction mode — blocks scroll on mobile.
      */
     interactive?: boolean;
+    /**
+     * Accessible name for the chart, announced by screen readers (the svg is
+     * exposed as `role="img"`). Defaults to an English description derived from
+     * the mode and keys (e.g. "Radar chart of speed, handling" or
+     * "Pie chart of revenue") — pass a localized string to override.
+     */
+    label?: string;
     children: ReactNode;
 }
 /**
@@ -61,5 +72,5 @@ export interface RadialChartProps {
  * </RadialChart>
  * ```
  */
-export declare function RadialChart({ data, height, axes, valueKey, labelKey, innerRadius: innerRadiusFraction, padAngle, children, }: RadialChartProps): import("react").JSX.Element;
+export declare function RadialChart({ data, height, axes, valueKey, labelKey, innerRadius: innerRadiusFraction, padAngle, label, children, }: RadialChartProps): import("react").JSX.Element;
 //# sourceMappingURL=RadialChart.d.ts.map

package/dist/Radial/RadialChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,mBAAuB,EACpC,QAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,+BAgIlB"}
+{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,mBAAuB,EACpC,QAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,gBAAgB,+BAwMlB"}

package/dist/Radial/RadialChart.js

@@ -7,11 +7,32 @@
  *
  * Owns the radial coordinate space: center, radius, angle/radius scales.
  * Same Tier 1 guarantee as Chart — all children map through the same context.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`), and small datasets are mirrored in a visually
+ * hidden data table (slices in pie mode, axis values in spider mode).
  */
 
 import { useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { RadialProvider } from "./RadialContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Maximum number of data points (rows × axes in spider mode, slices in pie
+ * mode) for which the visually hidden data-table fallback is rendered. Beyond
+ * this a table is more noise than signal, so larger charts are name-only.
+ */
+const MAX_TABLE_POINTS = 100;
+
+/**
+ * Row header for a spider-mode table row: the first string field in the row
+ * (the same heuristic RadialArea uses to match its `dataKey`), else the index.
+ */
+function spiderRowHeader(row, index) {
+  const name = Object.values(row).find(v => typeof v === 'string');
+  return typeof name === 'string' ? name : `Series ${index + 1}`;
+}
+
 /**
  * Root radial chart container. Computes angular/radial scales and provides
  * them to children via context.
@@ -39,6 +60,7 @@ export function RadialChart({
   labelKey,
   innerRadius: innerRadiusFraction = 0,
   padAngle = 0.02,
+  label,
   children
 }) {
   const containerRef = useRef(null);
@@ -152,18 +174,81 @@ export function RadialChart({
     ...spiderCtx,
     ...pieCtx
   }), [cx, cy, outerRadius, innerRadiusPx, data, mode, spiderCtx, pieCtx]);
-  return /*#__PURE__*/_jsx("div", {
+  const accessibleLabel = label ?? (mode === 'spider' ? `Radar chart of ${(axes ?? []).join(', ')}` : `Pie chart of ${valueKey ?? 'values'}`);
+  const slices = pieCtx.slices ?? [];
+  const showPieTable = mode === 'pie' && slices.length > 0 && slices.length <= MAX_TABLE_POINTS;
+  const showSpiderTable = mode === 'spider' && axes != null && axes.length > 0 && data.length > 0 && data.length * axes.length <= MAX_TABLE_POINTS;
+  return /*#__PURE__*/_jsxs("div", {
     ref: containerRef,
     style: {
       width: '100%'
     },
-    children: containerWidth > 0 && /*#__PURE__*/_jsx("svg", {
+    children: [containerWidth > 0 && /*#__PURE__*/_jsx("svg", {
+      role: "img",
+      "aria-label": accessibleLabel,
       width: containerWidth,
       height: height,
       children: /*#__PURE__*/_jsx(RadialProvider, {
         value: ctx,
         children: children
       })
-    })
+    }), showPieTable && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      children: /*#__PURE__*/_jsxs("table", {
+        children: [/*#__PURE__*/_jsx("caption", {
+          children: `${accessibleLabel} data`
+        }), /*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: labelKey ?? 'Label'
+            }), /*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: valueKey
+            }), /*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: "Percentage"
+            })]
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: slices.map((slice, i) => /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "row",
+              children: slice.key
+            }), /*#__PURE__*/_jsx("td", {
+              children: String(slice.value)
+            }), /*#__PURE__*/_jsx("td", {
+              children: `${(slice.percentage * 100).toFixed(1)}%`
+            })]
+          }, i))
+        })]
+      })
+    }), showSpiderTable && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      children: /*#__PURE__*/_jsxs("table", {
+        children: [/*#__PURE__*/_jsx("caption", {
+          children: `${accessibleLabel} data`
+        }), /*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: "Series"
+            }), axes.map(key => /*#__PURE__*/_jsx("th", {
+              scope: "col",
+              children: key
+            }, key))]
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: data.map((row, i) => /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsx("th", {
+              scope: "row",
+              children: spiderRowHeader(row, i)
+            }), axes.map(key => /*#__PURE__*/_jsx("td", {
+              children: row[key] == null ? '' : String(row[key])
+            }, key))]
+          }, i))
+        })]
+      })
+    })]
   });
 }

package/dist/Sankey/SankeyChart.d.ts

@@ -5,6 +5,10 @@
  *
  * When columns × minColumnWidth exceeds the container, the chart
  * scrolls horizontally rather than squishing columns together.
+ *
+ * Accessibility: the svg is exposed as a named image (role="img" + aria-label,
+ * overridable via `label`) in both the scrolling and non-scrolling paths, and
+ * small graphs are mirrored in a visually hidden From/To/Value table.
  */
 import { type ReactNode } from 'react';
 import type { SankeyNodeDatum, SankeyLinkDatum, SankeyColumn } from './types';
@@ -39,6 +43,14 @@ export interface SankeyChartProps {
      * When total min width exceeds the container, horizontal scrolling activates.
      */
     minColumnWidth?: number;
+    /**
+     * Accessible name for the chart, announced by screen readers. Applied to the
+     * svg (`role="img"`) and, when the chart scrolls, to the focusable scroll
+     * region. Pass a localized string to override the English default.
+     *
+     * @default 'Sankey chart'
+     */
+    label?: string;
     /** Chart contents */
     children: ReactNode;
 }
@@ -64,7 +76,7 @@ export interface SankeyChartProps {
  * </SankeyChart>
  * ```
  */
-export declare function SankeyChart({ nodes, links, columns, height, nodeWidth, nodeGap, nodeColor, minColumnWidth, children, }: SankeyChartProps): import("react").JSX.Element;
+export declare function SankeyChart({ nodes, links, columns, height, nodeWidth, nodeGap, nodeColor, minColumnWidth, label, children, }: SankeyChartProps): import("react").JSX.Element;
 export declare namespace SankeyChart {
     var displayName: string;
 }

package/dist/Sankey/SankeyChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,+BAqFlB;yBA/Fe,WAAW"}
+{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsDD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,KAAsB,EACtB,QAAQ,GACT,EAAE,gBAAgB,+BAsHlB;yBAjIe,WAAW"}