@mui/x-charts 9.12.0 → 9.14.0

package/RadarChart/RadarChart.mjs

@@ -224,7 +224,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRegisterRadarItemActivation = require("./useRegisterRadarItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick", "classes"];
@@ -54,6 +55,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
   const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   (0, _useRegisterRadarItemActivation.useRegisterRadarItemActivation)(seriesId, onItemClick, _useRegisterRadarItemActivation.RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -62,7 +66,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -83,7 +87,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { RADAR_ACTIVATION_PRIORITY, useRegisterRadarItemActivation } from "./useRegisterRadarItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
@@ -45,6 +46,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(inClasses);
   const getHighlightState = useItemHighlightStateGetter();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   useRegisterRadarItemActivation(seriesId, onItemClick, RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -53,7 +57,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -74,7 +78,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -66,13 +66,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -59,13 +59,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });

package/ScatterChart/ScatterChart.js

@@ -280,7 +280,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/ScatterChart/ScatterChart.mjs

@@ -273,7 +273,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/SparkLineChart/SparkLineChart.js

@@ -460,7 +460,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/SparkLineChart/SparkLineChart.mjs

@@ -453,7 +453,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/constants/index.d.mts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.d.ts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
+exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
 const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 const DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
@@ -16,4 +16,7 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
 };
 const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 45;
 const DEFAULT_AXIS_SIZE_HEIGHT = exports.DEFAULT_AXIS_SIZE_HEIGHT = 25;
-const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+const DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.mjs

@@ -10,4 +10,7 @@ export const DEFAULT_MARGINS = {
 };
 export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/hooks/animation/index.d.mts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/index.d.ts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";
 export * from "./useAnimateLine.js";
+export * from "./useAnimateMark.js";
 export * from "./useAnimatePieArc.js";
 export * from "./useAnimatePieArcLabel.js";

package/hooks/animation/index.js

@@ -58,6 +58,17 @@ Object.keys(_useAnimateLine).forEach(function (key) {
     }
   });
 });
+var _useAnimateMark = require("./useAnimateMark");
+Object.keys(_useAnimateMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateMark[key];
+    }
+  });
+});
 var _useAnimatePieArc = require("./useAnimatePieArc");
 Object.keys(_useAnimatePieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/animation/index.mjs

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/useAnimateMark.d.mts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateMark = useAnimateMark;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./useAnimate");
+function markPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateMark(props) {
+  return (0, _useAnimate.useAnimate)({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimateMark.mjs

@@ -0,0 +1,39 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function markPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateMark(props) {
+  return useAnimate({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.12.0
+ * @mui/x-charts v9.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.12.0
+ * @mui/x-charts v9.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -12,6 +12,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useChartId = require("../../../hooks/useChartId");
 var _ChartsProvider = require("../../../context/ChartsProvider");
 var _useDescription = require("./useDescription");
+var _useZoomAnnouncement = require("./useZoomAnnouncement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Make the proxy looks like a layer.
@@ -28,6 +29,19 @@ var _jsxRuntime = require("react/jsx-runtime");
   pointerEvents: 'none'
 };
 
+/**
+ * Keeps the live region out of sight without removing it from the accessibility tree.
+ */
+const liveRegionStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none'
+};
+
 // The proxy is implemented by having two divs with the same content, and toggling the visibility of each one when the content changes.
 // The idea is to imitate the behavior of the focus moving from a list element to another, but with the minimal number of DOM elements.
 
@@ -37,6 +51,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 function ChartsAccessibilityProxy() {
   const message = (0, _useDescription.useDescription)();
+  const zoomMessage = (0, _useZoomAnnouncement.useZoomAnnouncement)();
   const chartId = (0, _useChartId.useChartId)();
   const {
     instance
@@ -99,13 +114,21 @@ function ChartsAccessibilityProxy() {
       activeDiv.focus();
     }
   }, [message, chartId]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "none"
-    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
-    // blur the root mid hand-off and the chart would look like it lost the focus.
-    ,
-    tabIndex: message ? -1 : 0,
-    ref: handleRef,
-    style: fullSizeLayerStyle
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "none"
+      // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+      // blur the root mid hand-off and the chart would look like it lost the focus.
+      ,
+      tabIndex: message ? -1 : 0,
+      ref: handleRef,
+      style: fullSizeLayerStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: liveRegionStyle,
+      children: zoomMessage
+    })]
   });
 }

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -5,12 +5,13 @@ import useForkRef from '@mui/utils/useForkRef';
 import { useChartId } from "../../../hooks/useChartId.mjs";
 import { useChartsContext } from "../../../context/ChartsProvider/index.mjs";
 import { useDescription } from "./useDescription.mjs";
+import { useZoomAnnouncement } from "./useZoomAnnouncement.mjs";
 
 /**
  * Make the proxy looks like a layer.
  * Having a non-zero size is important for some screen readers to announce the content.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const fullSizeLayerStyle = {
   borderWidth: 0,
   width: '100%',
@@ -23,6 +24,19 @@ const fullSizeLayerStyle = {
   pointerEvents: 'none'
 };
 
+/**
+ * Keeps the live region out of sight without removing it from the accessibility tree.
+ */
+const liveRegionStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none'
+};
+
 // The proxy is implemented by having two divs with the same content, and toggling the visibility of each one when the content changes.
 // The idea is to imitate the behavior of the focus moving from a list element to another, but with the minimal number of DOM elements.
 
@@ -32,6 +46,7 @@ const fullSizeLayerStyle = {
  */
 export function ChartsAccessibilityProxy() {
   const message = useDescription();
+  const zoomMessage = useZoomAnnouncement();
   const chartId = useChartId();
   const {
     instance
@@ -94,13 +109,21 @@ export function ChartsAccessibilityProxy() {
       activeDiv.focus();
     }
   }, [message, chartId]);
-  return /*#__PURE__*/_jsx("div", {
-    role: "none"
-    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
-    // blur the root mid hand-off and the chart would look like it lost the focus.
-    ,
-    tabIndex: message ? -1 : 0,
-    ref: handleRef,
-    style: fullSizeLayerStyle
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      role: "none"
+      // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+      // blur the root mid hand-off and the chart would look like it lost the focus.
+      ,
+      tabIndex: message ? -1 : 0,
+      ref: handleRef,
+      style: fullSizeLayerStyle
+    }), /*#__PURE__*/_jsx("div", {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: liveRegionStyle,
+      children: zoomMessage
+    })]
   });
 }

package/internals/components/ChartsAccessibilityProxy/useZoomAnnouncement.d.mts

@@ -0,0 +1,9 @@
+/**
+ * Get the message announcing the visible range of the zoomable axes.
+ *
+ * The message is taken when the keyboard zoom and pan asks for it, not derived from the zoom
+ * itself: the zoom also moves on wheel, drag, and from the application, and the live region must
+ * stay silent then.
+ * @returns {string | null} the message to announce, or `null` when there is nothing to announce
+ */
+export declare function useZoomAnnouncement(): string | null;

package/internals/components/ChartsAccessibilityProxy/useZoomAnnouncement.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Get the message announcing the visible range of the zoomable axes.
+ *
+ * The message is taken when the keyboard zoom and pan asks for it, not derived from the zoom
+ * itself: the zoom also moves on wheel, drag, and from the application, and the live region must
+ * stay silent then.
+ * @returns {string | null} the message to announce, or `null` when there is nothing to announce
+ */
+export declare function useZoomAnnouncement(): string | null;

package/internals/components/ChartsAccessibilityProxy/useZoomAnnouncement.js

@@ -0,0 +1,67 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useZoomAnnouncement = useZoomAnnouncement;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+var _useStore = require("../../store/useStore");
+var _useChartKeyboardNavigation = require("../../plugins/featurePlugins/useChartKeyboardNavigation");
+var _useChartCartesianAxis = require("../../plugins/featurePlugins/useChartCartesianAxis");
+/**
+ * Get the message announcing the visible range of the zoomable axes.
+ *
+ * The message is taken when the keyboard zoom and pan asks for it, not derived from the zoom
+ * itself: the zoom also moves on wheel, drag, and from the application, and the live region must
+ * stay silent then.
+ * @returns {string | null} the message to announce, or `null` when there is nothing to announce
+ */
+function useZoomAnnouncement() {
+  const store = (0, _useStore.useStore)();
+  const announcement = store.use(_useChartKeyboardNavigation.selectorChartsZoomAnnouncement);
+  const zoomMap = store.use(_useChartCartesianAxis.selectorChartZoomMap);
+  const optionsLookup = store.use(_useChartCartesianAxis.selectorChartZoomOptionsLookup);
+  const {
+    localeText
+  } = (0, _hooks.useChartsLocalization)();
+  const [message, setMessage] = React.useState(null);
+
+  // The announcement is written from the values of the render the request lands on, so a later
+  // zoom coming from elsewhere does not rewrite the live region.
+  const currentValuesRef = React.useRef({
+    zoomMap,
+    optionsLookup,
+    localeText
+  });
+  currentValuesRef.current = {
+    zoomMap,
+    optionsLookup,
+    localeText
+  };
+  React.useEffect(() => {
+    if (announcement === 0) {
+      setMessage(null);
+      return;
+    }
+    const current = currentValuesRef.current;
+    if (!current.zoomMap) {
+      return;
+    }
+    const descriptions = Object.values(current.optionsLookup).map(options => {
+      const zoomData = current.zoomMap.get(options.axisId);
+      if (!zoomData) {
+        return null;
+      }
+      return current.localeText.zoomRangeDescription({
+        axisDirection: options.axisDirection,
+        start: zoomData.start,
+        end: zoomData.end
+      });
+    }).filter(Boolean);
+    setMessage(descriptions.length === 0 ? null : descriptions.join(current.localeText.a11yConnector));
+  }, [announcement]);
+  return message;
+}