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

package/dist/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../src/Chart.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAe,WAAW,EAAoB,MAAM,SAAS,CAAC;AAM1E,OAAO,EAAc,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAIpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkBD,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BAwRZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../src/Chart.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAe,WAAW,EAAoB,MAAM,SAAS,CAAC;AAO1E,OAAO,EAAc,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAIpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8BD,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA4UZ"}

package/dist/Chart.js

@@ -9,6 +9,10 @@
  *   1. Runs the layout engine (scales + stacking + grouping)
  *   2. Calls each series' resolve() and render() methods
  *   3. Provides a single event layer for interaction children
+ *
+ * Accessibility: the svg is exposed as a named image (role="img"; `title` or a
+ * derived default as aria-label), and small datasets are mirrored in a
+ * visually hidden data table for screen reader users.
  */
 
 'use client';
@@ -18,6 +22,7 @@ import { computeLayout } from "./layout.js";
 import { ChartProvider } from "./ChartContext.js";
 import { Text } from '@astryxdesign/core';
 import { VStack, HStack } from '@astryxdesign/core';
+import { VisuallyHidden } from '@astryxdesign/core';
 import * as stylex from '@stylexjs/stylex';
 import { ChartLegend } from "./ChartLegend.js";
 import { deriveLegendItems } from "./legend.js";
@@ -31,6 +36,18 @@ const DEFAULT_MARGIN = {
   bottom: 32,
   left: 48
 };
+
+/**
+ * Maximum number of data points (rows × data keys) 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);
+}
 export function Chart({
   data,
   xKey,
@@ -191,6 +208,14 @@ export function Chart({
     svgRef
   }), [innerWidth, innerHeight, margin, data, xKey, layout, onPointer]);
 
+  // ─── Accessibility ─────────────────────────────────────────────────────
+  // The svg is exposed as a named image. `title` (when given) is the name;
+  // otherwise an English default is derived from the primary series + x key.
+  const primarySeries = series.filter(s => !isUtilityMarkType(s.type));
+  const accessibleLabel = title ?? (primarySeries.length > 0 ? `Chart of ${primarySeries.map(s => s.label ?? s.key).join(', ')} by ${xKey}` : 'Chart');
+  const tableKeys = Array.from(new Set(primarySeries.flatMap(s => s.dataKeys)));
+  const showDataTable = data.length > 0 && tableKeys.length > 0 && data.length * tableKeys.length <= MAX_TABLE_POINTS;
+
   // ─── Legend ────────────────────────────────────────────────────────────
   const legendConfig = legend === true ? {} : legend || null;
   const legendElement = legendConfig ? /*#__PURE__*/_jsx(ChartLegend, {
@@ -246,14 +271,15 @@ export function Chart({
         gap: 4,
         children: [legendPosition === 'top' && legendElement, renderSvg(), legendPosition === 'bottom' && legendElement]
       })
-    })]
+    }), renderDataTable()]
   });
   function renderSvg() {
     return /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,
+      role: "img",
       width: "100%",
       height: safeHeight,
-      "aria-label": title ?? undefined,
+      "aria-label": accessibleLabel,
       "aria-describedby": subtitle ? descId : undefined,
       children: [title && /*#__PURE__*/_jsx("title", {
         children: title
@@ -298,4 +324,36 @@ export function Chart({
       })]
     });
   }
+  function renderDataTable() {
+    if (!showDataTable) {
+      return null;
+    }
+    return /*#__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
+            }), tableKeys.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])
+            }), tableKeys.map(key => /*#__PURE__*/_jsx("td", {
+              children: tableCell(d[key])
+            }, key))]
+          }, i))
+        })]
+      })
+    });
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/charts",
-  "version": "0.2.0-canary.f306f13",
+  "version": "0.2.0-canary.fc53ff7",
   "description": "Astryx charts — a config-model data visualization library (d3-based). Published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.2.0-canary.f306f13",
+    "@astryxdesign/core": "0.2.0-canary.fc53ff7",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },

package/src/Chart.test.tsx

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Chart.test.tsx
+ * @input Uses vitest, @testing-library/react, Chart root + bar mark
+ * @output Unit tests for Chart accessibility (WCAG 1.1.1)
+ * @position Testing; validates Chart.tsx accessible name + data-table fallback
+ */
+
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {Chart} from './Chart';
+import {bar} from './marks';
+
+const data = [
+  {month: 'Jan', revenue: 100, profit: 20},
+  {month: 'Feb', revenue: 200, profit: 40},
+  {month: 'Mar', revenue: 150, profit: 30},
+];
+
+// Capture the ResizeObserver callback so tests can drive the reported width.
+let resizeCallback: ResizeObserverCallback | undefined;
+
+beforeEach(() => {
+  resizeCallback = undefined;
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      constructor(cb: ResizeObserverCallback) {
+        resizeCallback = cb;
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function reportWidth(width: number) {
+  act(() => {
+    resizeCallback?.(
+      [{contentRect: {width}} as unknown as ResizeObserverEntry],
+      {} as ResizeObserver,
+    );
+  });
+}
+
+describe('Chart accessible name', () => {
+  it('exposes the svg as a named image with a default label', () => {
+    render(
+      <Chart
+        data={data}
+        xKey="month"
+        series={[bar('revenue'), bar('profit')]}
+      />,
+    );
+    reportWidth(600);
+
+    expect(
+      screen.getByRole('img', {name: 'Chart of revenue, profit by month'}),
+    ).toBeInTheDocument();
+  });
+
+  it('prefers the title prop as the accessible name', () => {
+    render(
+      <Chart
+        data={data}
+        xKey="month"
+        series={[bar('revenue')]}
+        title="Quarterly revenue"
+      />,
+    );
+    reportWidth(600);
+
+    expect(
+      screen.getByRole('img', {name: 'Quarterly revenue'}),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Chart data table fallback', () => {
+  it('renders a visually hidden table mirroring the data', () => {
+    render(
+      <Chart
+        data={data}
+        xKey="month"
+        series={[bar('revenue'), bar('profit')]}
+      />,
+    );
+    reportWidth(600);
+
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('columnheader', {name: 'month'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('columnheader', {name: 'revenue'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('columnheader', {name: 'profit'}),
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('rowheader', {name: 'Feb'})).toBeInTheDocument();
+    expect(screen.getByRole('cell', {name: '200'})).toBeInTheDocument();
+    expect(screen.getByRole('cell', {name: '40'})).toBeInTheDocument();
+
+    // Visually hidden, but still in the a11y tree.
+    const wrapper = table.parentElement as HTMLElement;
+    expect(wrapper.getAttribute('class')).toBeTruthy();
+    expect(wrapper).not.toHaveAttribute('hidden');
+  });
+
+  it('skips the table when the dataset exceeds the size cutoff', () => {
+    const big = Array.from({length: 101}, (_, i) => ({
+      month: `m${i}`,
+      revenue: i,
+    }));
+    render(<Chart data={big} xKey="month" series={[bar('revenue')]} />);
+    reportWidth(600);
+
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+});

package/src/Chart.tsx

@@ -9,6 +9,10 @@
  *   1. Runs the layout engine (scales + stacking + grouping)
  *   2. Calls each series' resolve() and render() methods
  *   3. Provides a single event layer for interaction children
+ *
+ * Accessibility: the svg is exposed as a named image (role="img"; `title` or a
+ * derived default as aria-label), and small datasets are mirrored in a
+ * visually hidden data table for screen reader users.
  */
 
 'use client';
@@ -28,6 +32,7 @@ import {computeLayout} from './layout';
 import {ChartProvider} from './ChartContext';
 import {Text} from '@astryxdesign/core';
 import {VStack, HStack} from '@astryxdesign/core';
+import {VisuallyHidden} from '@astryxdesign/core';
 import * as stylex from '@stylexjs/stylex';
 import {ChartLegend, type ChartLegendProps} from './ChartLegend';
 import {deriveLegendItems} from './legend';
@@ -62,6 +67,18 @@ export interface ChartProps {
 
 const DEFAULT_MARGIN: ChartMargin = {top: 24, right: 24, bottom: 32, left: 48};
 
+/**
+ * Maximum number of data points (rows × data keys) 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: unknown): string {
+  return value == null ? '' : String(value);
+}
+
 const styles = stylex.create({
   container: {
     width: '100%',
@@ -250,6 +267,23 @@ export function Chart({
     [innerWidth, innerHeight, margin, data, xKey, layout, onPointer],
   );
 
+  // ─── Accessibility ─────────────────────────────────────────────────────
+  // The svg is exposed as a named image. `title` (when given) is the name;
+  // otherwise an English default is derived from the primary series + x key.
+  const primarySeries = series.filter(s => !isUtilityMarkType(s.type));
+  const accessibleLabel =
+    title ??
+    (primarySeries.length > 0
+      ? `Chart of ${primarySeries
+          .map(s => s.label ?? s.key)
+          .join(', ')} by ${xKey}`
+      : 'Chart');
+  const tableKeys = Array.from(new Set(primarySeries.flatMap(s => s.dataKeys)));
+  const showDataTable =
+    data.length > 0 &&
+    tableKeys.length > 0 &&
+    data.length * tableKeys.length <= MAX_TABLE_POINTS;
+
   // ─── Legend ────────────────────────────────────────────────────────────
   const legendConfig = legend === true ? {} : legend || null;
 
@@ -309,6 +343,7 @@ export function Chart({
           </VStack>
         )}
       </ChartProvider>
+      {renderDataTable()}
     </div>
   );
 
@@ -316,9 +351,10 @@ export function Chart({
     return (
       <svg
         ref={svgRef}
+        role="img"
         width="100%"
         height={safeHeight}
-        aria-label={title ?? undefined}
+        aria-label={accessibleLabel}
         aria-describedby={subtitle ? descId : undefined}>
         {title && <title>{title}</title>}
         {subtitle && <desc id={descId}>{subtitle}</desc>}
@@ -373,4 +409,37 @@ export function Chart({
       </svg>
     );
   }
+
+  function renderDataTable() {
+    if (!showDataTable) {
+      return null;
+    }
+    return (
+      <VisuallyHidden as="div">
+        <table>
+          <caption>{`${accessibleLabel} data`}</caption>
+          <thead>
+            <tr>
+              <th scope="col">{xKey}</th>
+              {tableKeys.map(key => (
+                <th key={key} scope="col">
+                  {key}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((d, i) => (
+              <tr key={i}>
+                <th scope="row">{tableCell(d[xKey])}</th>
+                {tableKeys.map(key => (
+                  <td key={key}>{tableCell(d[key])}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </VisuallyHidden>
+    );
+  }
 }