@coinbase/cds-mobile-visualization 3.4.0-beta.23 → 3.4.0-beta.24

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.24 (3/12/2026 PST)
+
+#### 🚀 Updates
+
+- Improve chart accessibility. [[#492](https://github.com/coinbase/cds/pull/492)]
+
 ## 3.4.0-beta.23 (3/10/2026 PST)
 
 #### 🚀 Updates

package/dts/chart/CartesianChart.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type StyleProp, type View, type ViewStyle } from 'react-native';
 import type { BoxBaseProps, BoxProps } from '@coinbase/cds-mobile/layout';
 import { type SkTypefaceFontProvider } from '@shopify/react-native-skia';
+import { type ScrubberAccessibilityViewProps } from './scrubber/ScrubberAccessibilityView';
 import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
 import {
   type CartesianAxisConfigProps,
@@ -80,6 +81,15 @@ export type CartesianChartProps = CartesianChartBaseProps &
      * If not provided, the only available fonts will be those defined by the system.
      */
     fontProvider?: SkTypefaceFontProvider;
+    /**
+     * Function that returns the accessibility label for each scrubber point.
+     * Receives `dataIndex` for each scrubber point label.
+     */
+    getScrubberAccessibilityLabel?: ScrubberAccessibilityViewProps['accessibilityLabel'];
+    /**
+     * Number of data points to move between screen-reader samples.
+     */
+    scrubberAccessibilityLabelStep?: number;
     /**
      * Custom styles for the root element.
      */
@@ -168,6 +178,15 @@ export declare const CartesianChart: React.MemoExoticComponent<
          * If not provided, the only available fonts will be those defined by the system.
          */
         fontProvider?: SkTypefaceFontProvider;
+        /**
+         * Function that returns the accessibility label for each scrubber point.
+         * Receives `dataIndex` for each scrubber point label.
+         */
+        getScrubberAccessibilityLabel?: ScrubberAccessibilityViewProps['accessibilityLabel'];
+        /**
+         * Number of data points to move between screen-reader samples.
+         */
+        scrubberAccessibilityLabelStep?: number;
         /**
          * Custom styles for the root element.
          */

package/dts/chart/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"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"}

package/dts/chart/line/LineChart.d.ts

@@ -69,7 +69,13 @@ export type LineChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis'
     yAxis?: Partial<CartesianAxisConfigProps> & YAxisProps;
   };
 export type LineChartProps = LineChartBaseProps &
-  Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
+  Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series' | 'scrubberAccessibilityLabelStep'> & {
+    /**
+     * Number of data points to move between screen-reader samples.
+     * @default Computed from data length (targeting 10 samples)
+     */
+    scrubberAccessibilityLabelStep?: number;
+  };
 export declare const LineChart: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
     Omit<CartesianChartBaseProps, 'series' | 'xAxis' | 'yAxis'> &
@@ -114,8 +120,16 @@ export declare const LineChart: import('react').MemoExoticComponent<
          * To show the axis, set `showYAxis` to true.
          */
         yAxis?: Partial<CartesianAxisConfigProps> & YAxisProps;
-      } & Omit<CartesianChartProps, 'series' | 'xAxis' | 'yAxis'> &
-      import('react').RefAttributes<View>
+      } & Omit<
+        CartesianChartProps,
+        'series' | 'xAxis' | 'yAxis' | 'scrubberAccessibilityLabelStep'
+      > & {
+        /**
+         * Number of data points to move between screen-reader samples.
+         * @default Computed from data length (targeting 10 samples)
+         */
+        scrubberAccessibilityLabelStep?: number;
+      } & import('react').RefAttributes<View>
   >
 >;
 //# sourceMappingURL=LineChart.d.ts.map

package/dts/chart/line/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/chart/line/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,eAAe,GACf,eAAe,GACf,QAAQ,GACR,aAAa,GACb,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,CACF,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,GACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,cAAc,GACd,YAAY,GACZ,aAAa,GACb,SAAS,CACZ,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS;IA9BlB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;IACtD;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;mGAgIzD,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/chart/line/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAU9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,eAAe,GACf,eAAe,GACf,QAAQ,GACR,aAAa,GACb,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,CACF,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,GACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,cAAc,GACd,YAAY,GACZ,aAAa,GACb,SAAS,CACZ,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,gCAAgC,CAAC,GAAG;IAC3F;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC,CAAC;AAEJ,eAAO,MAAM,SAAS;IApClB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;IACtD;;;;OAIG;YACK,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU;;IAKtD;;;OAGG;qCAC8B,MAAM;yCA+I1C,CAAC"}

package/dts/chart/scrubber/ScrubberAccessibilityView.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type ScrubberAccessibilityViewProps = {
+  accessibilityLabel?: (dataIndex: number) => string;
+  accessibilityStep?: number;
+};
+export declare const ScrubberAccessibilityView: React.MemoExoticComponent<
+  ({
+    accessibilityLabel,
+    accessibilityStep,
+  }: ScrubberAccessibilityViewProps) => import('react/jsx-runtime').JSX.Element | undefined
+>;
+//# sourceMappingURL=ScrubberAccessibilityView.d.ts.map

package/dts/chart/scrubber/ScrubberAccessibilityView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubberAccessibilityView.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberAccessibilityView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAqI1D,MAAM,MAAM,8BAA8B,GAAG;IAC3C,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,wEACQ,8BAA8B,yDAmH3E,CAAC"}

package/esm/chart/CartesianChart.js

@@ -1,10 +1,11 @@
-const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable"];
+const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
 import { Box } from '@coinbase/cds-mobile/layout';
 import { Canvas, Skia } from '@shopify/react-native-skia';
+import { ScrubberAccessibilityView } from './scrubber/ScrubberAccessibilityView';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
 import { convertToSerializableScale } from './utils/scale';
 import { useChartContextBridge } from './ChartContextBridge';
@@ -15,10 +16,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartCanvas = /*#__PURE__*/memo(_ref => {
   let {
     children,
-    style
+    style,
+    accessible = true,
+    accessibilityLabel,
+    accessibilityLiveRegion = 'polite'
   } = _ref;
   const ContextBridge = useChartContextBridge();
+  const isAccessible = accessible && accessibilityLabel !== null;
   return /*#__PURE__*/_jsx(Canvas, {
+    accessibilityLabel: isAccessible ? accessibilityLabel : undefined,
+    accessibilityLiveRegion: isAccessible ? accessibilityLiveRegion : undefined,
+    accessible: isAccessible,
     style: [{
       width: '100%',
       height: '100%'
@@ -35,6 +43,8 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       layout = 'vertical',
       animate = true,
       enableScrubbing,
+      getScrubberAccessibilityLabel,
+      scrubberAccessibilityLabelStep,
       xAxis: xAxisConfigProp,
       yAxis: yAxisConfigProp,
       inset,
@@ -52,7 +62,10 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       // React Native will collapse views by default when only used
       // to group children, which interferes with gesture-handler
       // https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#:~:text=%7B%0A%20%20return%20%3C-,View,-collapsable%3D%7B
-      collapsable = false
+      collapsable = false,
+      accessible = true,
+      accessibilityLabel,
+      accessibilityLiveRegion = 'polite'
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   const [containerLayout, onContainerLayout] = useLayout();
@@ -366,8 +379,6 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
   }, [legend, legendAccessibilityLabel, legendPosition]);
   const rootBoxProps = useMemo(() => _extends({
     ref,
-    accessibilityLiveRegion: 'polite',
-    accessibilityRole: 'image',
     height,
     style: rootStyles,
     width
@@ -378,26 +389,40 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       allowOverflowGestures: allowOverflowGestures,
       enableScrubbing: enableScrubbing,
       onScrubberPositionChange: onScrubberPositionChange,
-      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({}, rootBoxProps, {
-        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row',
-        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsx(Box, {
+      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row'
+      }, rootBoxProps, {
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsxs(Box, {
           collapsable: collapsable,
           onLayout: onContainerLayout,
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/_jsx(ChartCanvas, {
+          children: [/*#__PURE__*/_jsx(ChartCanvas, {
+            accessibilityLabel: accessibilityLabel,
+            accessibilityLiveRegion: accessibilityLiveRegion,
+            accessible: accessible,
             style: styles == null ? void 0 : styles.chart,
             children: children
-          })
+          }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+            accessibilityLabel: getScrubberAccessibilityLabel,
+            accessibilityStep: scrubberAccessibilityLabelStep
+          })]
         }), (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
-      })) : /*#__PURE__*/_jsx(Box, _extends({}, rootBoxProps, {
+      })) : /*#__PURE__*/_jsxs(Box, _extends({
         collapsable: collapsable,
-        onLayout: onContainerLayout,
-        children: /*#__PURE__*/_jsx(ChartCanvas, {
+        onLayout: onContainerLayout
+      }, rootBoxProps, {
+        children: [/*#__PURE__*/_jsx(ChartCanvas, {
+          accessibilityLabel: accessibilityLabel,
+          accessibilityLiveRegion: accessibilityLiveRegion,
+          accessible: accessible,
           style: styles == null ? void 0 : styles.chart,
           children: children
-        })
+        }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+          accessibilityLabel: getScrubberAccessibilityLabel,
+          accessibilityStep: scrubberAccessibilityLabelStep
+        })]
       }))
     })
   });

package/esm/chart/__stories__/CartesianChart.stories.js

@@ -250,11 +250,21 @@ const PriceWithVolumeChart = /*#__PURE__*/memo(_ref3 => {
       day: 'numeric'
     });
   }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
   const scrubberLabel = useCallback(dataIndex => {
     return formatDate(btcDates[dataIndex]);
   }, [formatDate]);
+  const chartAccessibilityLabel = useMemo(() => {
+    const lastIndex = btcPrices.length - 1;
+    return "Bitcoin chart. Current date " + formatDate(btcDates[lastIndex]) + ". Current price " + formatPriceInThousands(btcPrices[lastIndex]) + ". Current volume " + formatVolume(btcVolumes[lastIndex]) + ".";
+  }, [formatDate, formatPriceInThousands, formatVolume]);
+  const getScrubberAccessibilityLabel = useCallback(dataIndex => "Bitcoin on " + formatDate(btcDates[dataIndex]) + ". Price " + formatPriceInThousands(btcPrices[dataIndex]) + ". Volume " + formatVolume(btcVolumes[dataIndex]) + ".", [formatDate, formatPriceInThousands, formatVolume]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     onScrubberPositionChange: onScrubberPositionChange,
     series: [{