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

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,17 +1,22 @@
+import { useCallback } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { DottedLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const basicData = [24, 13, 98, 39, 48, 38, 43];
 const BasicExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: "Area chart with " + basicData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 400,
     series: [{
       id: 'pageViews',
-      data: [24, 13, 98, 39, 48, 38, 43]
+      data: basicData
     }],
     yAxis: {
       showGrid: true,
@@ -22,21 +27,26 @@ const BasicExample = () => {
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
 };
+const currentRewardsData = [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170];
+const potentialRewardsData = [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900];
 const StackedExample = () => {
   const theme = useTheme();
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": current " + currentRewardsData[index] + ", potential " + potentialRewardsData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showLines: true,
     stacked: true,
+    accessibilityLabel: "Stacked rewards chart with " + currentRewardsData.length + " data points. Swipe to navigate.",
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 256,
     series: [{
       id: 'currentRewards',
-      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      data: currentRewardsData,
       color: theme.color.fg
     }, {
       id: 'potentialRewards',
-      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      data: potentialRewardsData,
       color: theme.color.fgPositive,
       type: 'dotted',
       LineComponent: DottedLine
@@ -59,6 +69,8 @@ const AreaChartStories = () => {
         enableScrubbing: true,
         showLines: true,
         showYAxis: true,
+        accessibilityLabel: "Area chart with negative values. 7 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [24, 13, -98, 39, 48, 38, 43][index],
         height: 150,
         series: [{
           id: 'pageViews',
@@ -101,6 +113,8 @@ const AreaChartStories = () => {
         showLines: true,
         showXAxis: true,
         showYAxis: true,
+        accessibilityLabel: "Volume by asset. 5 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'][index] + ": " + [68, 54, 43, 29, 18][index] + "%",
         height: 280,
         layout: "horizontal",
         series: [{

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -53,10 +53,14 @@ const Simple = () => {
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
+  const chartAccessibilityLabel = "Page views and unique visitors across " + pageNames.length + " pages. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => pageNames[index] + ": " + pageViews[index] + " views, " + pageUniqueVisitors[index] + " unique visitors", [pageNames, pageViews, pageUniqueVisitors]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     inset: 32,
     series: [{
@@ -97,8 +101,8 @@ const Simple = () => {
 };
 const TimeOfDayAxesExample = () => {
   const theme = useTheme();
-  const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
-  const lineB = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+  const lineA = useMemo(() => [5, 5, 10, 90, 85, 70, 30, 25, 25], []);
+  const lineB = useMemo(() => [90, 85, 70, 25, 23, 40, 45, 40, 50], []);
   const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
   const dateFormatter = useCallback(index => {
     return new Date(timeData[index]).toLocaleDateString('en-US', {
@@ -117,8 +121,12 @@ const TimeOfDayAxesExample = () => {
   const dateTicks = useMemo(() => {
     return timeData.map((d, index) => index).filter(d => d % 2 === 0);
   }, [timeData]);
+  const chartAccessibilityLabel = "Chart with " + lineA.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": lineA " + lineA[index] + ", lineB " + lineB[index], [lineA, lineB]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'lineA',
@@ -150,51 +158,57 @@ const TimeOfDayAxesExample = () => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
-const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
-  enableScrubbing: true,
-  height: defaultChartHeight,
-  series: [{
-    id: 'linear',
-    yAxisId: 'linearAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'linear'
-  }, {
-    id: 'log',
-    yAxisId: 'logAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'log'
-  }],
-  xAxis: {
-    data: [1, 10, 30, 50, 70, 90, 100]
-  },
-  yAxis: [{
-    id: 'linearAxis',
-    scaleType: 'linear'
-  }, {
-    id: 'logAxis',
-    scaleType: 'log'
-  }],
-  children: [/*#__PURE__*/_jsx(XAxis, {
-    showLine: true,
-    showTickMarks: true
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "logAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "linearAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "linear"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "log"
-  }), /*#__PURE__*/_jsx(Scrubber, {})]
-});
+const multipleYAxesData = [1, 10, 30, 50, 70, 90, 100];
+const MultipleYAxesExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": linear " + multipleYAxesData[index] + ", log " + multipleYAxesData[index], []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with linear and log axes. 7 data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: multipleYAxesData,
+      label: 'linear'
+    }, {
+      id: 'log',
+      yAxisId: 'logAxis',
+      data: multipleYAxesData,
+      label: 'log'
+    }],
+    xAxis: {
+      data: multipleYAxesData
+    },
+    yAxis: [{
+      id: 'linearAxis',
+      scaleType: 'linear'
+    }, {
+      id: 'logAxis',
+      scaleType: 'log'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "logAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linearAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "linear"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "log"
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
 const AxesOnAllSides = () => {
   const theme = useTheme();
   const data = [30, 45, 60, 80, 55, 40, 65];
@@ -298,9 +312,12 @@ const DomainLimitType = _ref => {
   let {
     limit
   } = _ref;
-  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
+  const exponentialData = useMemo(() => [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + exponentialData[index], [exponentialData]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Exponential growth chart with " + exponentialData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'growthLinear',

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -801,11 +801,17 @@ const CandlesticksChart = /*#__PURE__*/memo(_ref8 => {
       day: 'numeric'
     });
   }, []);
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const candle = candlestickStockData[index];
+    return formatTime(index) + ": O " + formatThousandsPriceNumber(parseFloat(candle.open)) + " H " + formatThousandsPriceNumber(parseFloat(candle.high)) + " L " + formatThousandsPriceNumber(parseFloat(candle.low)) + " C " + formatThousandsPriceNumber(parseFloat(candle.close));
+  }, [formatTime, formatThousandsPriceNumber]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Candlestick chart with " + candlesData.length + " data points. Swipe to navigate.",
     animate: false,
     "aria-labelledby": infoTextId,
     borderRadius: 0,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     inset: {
       top: 8,

package/esm/chart/line/LineChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "scrubberAccessibilityLabelStep", "layout", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId"];
@@ -10,6 +10,13 @@ import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from './Line';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getDefaultScrubberAccessibilityStep = function (dataLength, sampleCount) {
+  if (sampleCount === void 0) {
+    sampleCount = 10;
+  }
+  if (dataLength <= 0) return 1;
+  return Math.max(1, Math.ceil(dataLength / sampleCount));
+};
 export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       series,
@@ -31,6 +38,8 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       xAxis,
       yAxis,
       inset,
+      scrubberAccessibilityLabelStep,
+      layout = 'vertical',
       children
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -88,9 +97,21 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     domainLimit: yDomainLimit,
     range: yRange
   };
+  const categoryAxisData = layout === 'horizontal' ? yData : xData;
+  const lineChartDataLength = useMemo(() => {
+    if (categoryAxisData && categoryAxisData.length > 0) return categoryAxisData.length;
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _s$data$length, _s$data;
+      return Math.max(max, (_s$data$length = (_s$data = s.data) == null ? void 0 : _s$data.length) != null ? _s$data$length : 0);
+    }, 0);
+  }, [categoryAxisData, series]);
+  const resolvedScrubberAccessibilityLabelStep = useMemo(() => scrubberAccessibilityLabelStep != null ? scrubberAccessibilityLabelStep : getDefaultScrubberAccessibilityStep(lineChartDataLength), [scrubberAccessibilityLabelStep, lineChartDataLength]);
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
     inset: inset,
+    layout: layout,
+    scrubberAccessibilityLabelStep: resolvedScrubberAccessibilityLabelStep,
     series: chartSeries,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -34,31 +34,24 @@ import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function MultipleLine() {
   const theme = useTheme();
-  const [scrubberPosition, setScrubberPosition] = useState();
   const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
   const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
   const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
   const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.";
-  }, [pages, pageViews, uniqueVisitors]);
+  const chartAccessibilityHint = 'Swipe left or right to hear details for each page.';
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: chartAccessibilityHint,
+    accessibilityLabel: chartAccessibilityLabel + " " + chartAccessibilityHint,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'pageViews',
       data: pageViews,
@@ -85,27 +78,19 @@ function MultipleLine() {
   });
 }
 function DataFormat() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
   const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
   const chartAccessibilityLabel = "Chart with custom X and Y data. " + yData.length + " data points";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index];
-  }, [xData, yData]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index], [xData, yData]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     points: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 16,
@@ -113,7 +98,6 @@ function DataFormat() {
       bottom: 0,
       left: 0
     },
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'line',
       data: yData
@@ -144,6 +128,8 @@ function LiveUpdates() {
     return sparklineInteractiveData.hour.map(d => d.value);
   }, []);
   const [priceData, setPriceData] = useState(initialData);
+  const chartAccessibilityLabel = "Live price chart with " + priceData.length + " data points.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + priceData[index], [priceData]);
   const lastDataPointTimeRef = useRef(Date.now());
   const updateCountRef = useRef(0);
   const intervalSeconds = 3600 / initialData.length;
@@ -182,6 +168,8 @@ function LiveUpdates() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       right: 64
@@ -198,9 +186,17 @@ function LiveUpdates() {
 }
 function MissingData() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, null, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, null, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, null, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, null, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pages.length + " pages. Some data points are missing.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const pv = pageViews[index];
+    const uv = uniqueVisitors[index];
+    const pvStr = pv != null ? pv : 'no data';
+    const uvStr = uv != null ? uv : 'no data';
+    return pages[index] + ": " + pvStr + " views, " + uvStr + " unique visitors.";
+  }, [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -210,6 +206,8 @@ function MissingData() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -239,6 +237,9 @@ function MissingData() {
 }
 function Interaction() {
   const [scrubberPosition, setScrubberPosition] = useState();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + data[index], [data]);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
     children: [/*#__PURE__*/_jsx(Text, {
@@ -247,11 +248,13 @@ function Interaction() {
     }), /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       onScrubberPositionChange: setScrubberPosition,
       series: [{
         id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        data
       }],
       children: /*#__PURE__*/_jsx(Scrubber, {})
     })]
@@ -391,8 +394,12 @@ function Transitions() {
         color: positiveColor
       }]
     };
+    const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+    const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + valueAtIndexFormatter(index), [valueAtIndexFormatter]);
     return /*#__PURE__*/_jsxs(CartesianChart, {
       enableScrubbing: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       inset: {
         top: 32,
@@ -433,7 +440,6 @@ function Transitions() {
   return /*#__PURE__*/_jsx(CustomTransitionsChart, {});
 }
 function BasicAccessible() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
 
   // Chart-level accessibility label provides overview
@@ -441,24 +447,14 @@ function BasicAccessible() {
     const currentPrice = data[data.length - 1];
     return "Price chart showing trend over " + data.length + " data points. Current value: " + currentPrice + ". Use arrow keys to adjust view";
   }, [data]);
-
-  // Scrubber-level accessibility label provides specific position info
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Price at position " + (index + 1) + " of " + data.length + ": " + data[index];
-  }, [data]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Price at position " + (index + 1) + " of " + data.length + ": " + data[index], [data]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'prices',
       data: data
@@ -618,8 +614,12 @@ function GainLossChart() {
       }
     }
   })));
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + tickLabelFormatter(data[index]), [data, tickLabelFormatter]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'prices',
@@ -674,9 +674,11 @@ function HighLowPrice() {
 }
 function StylingScrubber() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + ": " + pageViews[index] + " views, " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -685,6 +687,8 @@ function StylingScrubber() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -905,6 +909,12 @@ function AssetPriceWithDottedArea() {
       });
       return dayOfWeek + ", " + monthDay + ", " + time;
     }, []);
+    const chartAccessibilityLabel = "Bitcoin price chart for " + timePeriod.label + " period. Current price: " + formatPrice(currentPrice) + ".";
+    const getScrubberAccessibilityLabel = useCallback(index => {
+      const price = formatPrice(sparklineTimePeriodDataValues[index]);
+      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+      return price + " " + date;
+    }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
     return /*#__PURE__*/_jsxs(VStack, {
       gap: 2,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
@@ -927,7 +937,9 @@ function AssetPriceWithDottedArea() {
       }), /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: chartAccessibilityLabel,
         areaType: "dotted",
+        getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
         height: 200,
         inset: {
           top: 52
@@ -1089,11 +1101,19 @@ const PerformanceChart = /*#__PURE__*/memo(_ref10 => {
     return dayOfWeek + ", " + monthDay + ", " + time;
   }, []);
   const getScrubberLabel = useCallback(d => formatDate(sparklineTimePeriodDataTimestamps[d]), [formatDate, sparklineTimePeriodDataTimestamps]);
+  const chartAccessibilityLabel = "Bitcoin price chart with high, actual, and low series. " + sparklineTimePeriodDataValues.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = formatPriceThousands(sparklineTimePeriodDataValues[index]);
+    const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+    return "Point " + (index + 1) + ": " + price + ", " + date;
+  }, [formatDate, formatPriceThousands, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
     areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 300,
     inset: {
       top: 52,
@@ -1250,6 +1270,12 @@ function MonotoneAssetPrice() {
     dy: -12,
     horizontalAlignment: "left"
   })), []);
+  const chartAccessibilityLabel = "Price chart with " + prices.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = scrubberPriceFormatter.format(prices[index].value);
+    const date = formatDate(prices[index].date);
+    return price + " USD " + date;
+  }, [formatDate, prices, scrubberPriceFormatter]);
   const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
       dataX,
@@ -1323,6 +1349,8 @@ function MonotoneAssetPrice() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 64
@@ -1397,8 +1425,12 @@ function ServiceAvailability() {
     date: new Date('2022-01-10'),
     availability: 86
   }], []);
+  const chartAccessibilityLabel = "Service availability chart with " + availabilityEvents.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + availabilityEvents[index].availability + "% availability on " + availabilityEvents[index].date.toLocaleDateString(), [availabilityEvents]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'availability',
@@ -1471,7 +1503,7 @@ function ServiceAvailability() {
 }
 function ForecastAssetPrice() {
   const startYear = 2020;
-  const data = [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70];
+  const data = useMemo(() => [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70], []);
   const currentIndex = 6;
   const strokeWidth = 3;
   // To prevent cutting off the edge of our lines
@@ -1575,8 +1607,12 @@ function ForecastAssetPrice() {
       })]
     });
   });
+  const chartAccessibilityLabel = "Forecast chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + axisFormatter(index) + ", value " + data[index], [axisFormatter, data]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'price',
@@ -1875,6 +1911,8 @@ function ExampleNavigator() {
     component: /*#__PURE__*/_jsxs(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: "Price chart with reference line. 14 data points. Swipe to navigate.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1),
       height: 200,
       series: [{
         id: 'prices',