@mui/x-charts 9.13.0 → 9.15.0

package/internals/commonNextFocusItem.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createGetFirstIndexFocusedItem = createGetFirstIndexFocusedItem;
+exports.createGetFirstSeriesFirstIndexFocusedItem = createGetFirstSeriesFirstIndexFocusedItem;
+exports.createGetFirstSeriesFocusedItem = createGetFirstSeriesFocusedItem;
+exports.createGetLastIndexFocusedItem = createGetLastIndexFocusedItem;
+exports.createGetLastSeriesFocusedItem = createGetLastSeriesFocusedItem;
+exports.createGetLastSeriesLastIndexFocusedItem = createGetLastSeriesLastIndexFocusedItem;
 exports.createGetNextIndexFocusedItem = createGetNextIndexFocusedItem;
 exports.createGetNextSeriesFocusedItem = createGetNextSeriesFocusedItem;
 exports.createGetPreviousIndexFocusedItem = createGetPreviousIndexFocusedItem;
 exports.createGetPreviousSeriesFocusedItem = createGetPreviousSeriesFocusedItem;
 var _getPreviousNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries");
+var _getNonEmptySeriesArray = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray");
 var _getMaxSeriesLength = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength");
 var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries");
 var _findVisibleDataIndex = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex");
@@ -125,6 +132,88 @@ useCurrentSeriesMaxLength = true) {
     };
   };
 }
+function createGetFirstIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getFirstIndexFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
+      const nextSeries = (0, _getNextNonEmptySeries.getNextNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (nextSeries === null) {
+        return null;
+      }
+      type = nextSeries.type;
+      seriesId = nextSeries.seriesId;
+    }
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : (0, _getMaxSeriesLength.getMaxSeriesLength)(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: 0,
+      dataLength: maxLength,
+      direction: 1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type: type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+function createGetLastIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getLastIndexFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
+      const previousSeries = (0, _getPreviousNonEmptySeries.getPreviousNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (previousSeries === null) {
+        return null;
+      }
+      type = previousSeries.type;
+      seriesId = previousSeries.seriesId;
+    }
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : (0, _getMaxSeriesLength.getMaxSeriesLength)(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: maxLength - 1,
+      dataLength: maxLength,
+      direction: -1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type: type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
 function createGetNextSeriesFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -196,4 +285,156 @@ compatibleSeriesTypes) {
       dataIndex: visibleDataIndex
     };
   };
+}
+function createGetFirstSeriesFirstIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getFirstSeriesFirstIndexFocusedItem(_currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    const firstSeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, compatibleSeriesTypes)[0];
+    if (firstSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = firstSeries;
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : (0, _getMaxSeriesLength.getMaxSeriesLength)(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: 0,
+      dataLength: maxLength,
+      direction: 1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+function createGetLastSeriesLastIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getLastSeriesLastIndexFocusedItem(_currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    const nonEmptySeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, compatibleSeriesTypes);
+    const lastSeries = nonEmptySeries[nonEmptySeries.length - 1];
+    if (lastSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = lastSeries;
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : (0, _getMaxSeriesLength.getMaxSeriesLength)(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: maxLength - 1,
+      dataLength: maxLength,
+      direction: -1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+function createGetFirstSeriesFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes) {
+  return function getFirstSeriesFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    const firstSeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, compatibleSeriesTypes)[0];
+    if (firstSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = firstSeries;
+    const data = processedSeries[type].series[seriesId].data;
+    const startIndex = currentItem?.dataIndex == null ? 0 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: 1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+function createGetLastSeriesFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes) {
+  return function getLastSeriesFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    const nonEmptySeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, compatibleSeriesTypes);
+    const lastSeries = nonEmptySeries[nonEmptySeries.length - 1];
+    if (lastSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = lastSeries;
+    const data = processedSeries[type].series[seriesId].data;
+    const startIndex = currentItem?.dataIndex == null ? data.length - 1 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: -1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
 }

package/internals/commonNextFocusItem.mjs

@@ -1,4 +1,5 @@
 import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.mjs";
+import { getNonEmptySeriesArray } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray.mjs";
 import { getMaxSeriesLength } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.mjs";
 import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.mjs";
 import { findVisibleDataIndex } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.mjs";
@@ -117,6 +118,88 @@ useCurrentSeriesMaxLength = true) {
     };
   };
 }
+export function createGetFirstIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getFirstIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
+      const nextSeries = getNextNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (nextSeries === null) {
+        return null;
+      }
+      type = nextSeries.type;
+      seriesId = nextSeries.seriesId;
+    }
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: 0,
+      dataLength: maxLength,
+      direction: 1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type: type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+export function createGetLastIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getLastIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
+      const previousSeries = getPreviousNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (previousSeries === null) {
+        return null;
+      }
+      type = previousSeries.type;
+      seriesId = previousSeries.seriesId;
+    }
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: maxLength - 1,
+      dataLength: maxLength,
+      direction: -1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type: type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
 export function createGetNextSeriesFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -188,4 +271,156 @@ compatibleSeriesTypes) {
       dataIndex: visibleDataIndex
     };
   };
+}
+export function createGetFirstSeriesFirstIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getFirstSeriesFirstIndexFocusedItem(_currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    const firstSeries = getNonEmptySeriesArray(processedSeries, compatibleSeriesTypes)[0];
+    if (firstSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = firstSeries;
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: 0,
+      dataLength: maxLength,
+      direction: 1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+export function createGetLastSeriesLastIndexFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes,
+/**
+ * If true, series max index is defined by the current series length and not all series.
+ */
+useCurrentSeriesMaxLength = true) {
+  return function getLastSeriesLastIndexFocusedItem(_currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    const nonEmptySeries = getNonEmptySeriesArray(processedSeries, compatibleSeriesTypes);
+    const lastSeries = nonEmptySeries[nonEmptySeries.length - 1];
+    if (lastSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = lastSeries;
+    const maxLength = useCurrentSeriesMaxLength ? processedSeries[type]?.series[seriesId]?.data.length ?? 0 : getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: maxLength - 1,
+      dataLength: maxLength,
+      direction: -1,
+      allowCycles: false
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+export function createGetFirstSeriesFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes) {
+  return function getFirstSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    const firstSeries = getNonEmptySeriesArray(processedSeries, compatibleSeriesTypes)[0];
+    if (firstSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = firstSeries;
+    const data = processedSeries[type].series[seriesId].data;
+    const startIndex = currentItem?.dataIndex == null ? 0 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: 1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
+}
+export function createGetLastSeriesFocusedItem(
+/**
+ * The set of series types compatible with this navigation action.
+ */
+compatibleSeriesTypes) {
+  return function getLastSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    const nonEmptySeries = getNonEmptySeriesArray(processedSeries, compatibleSeriesTypes);
+    const lastSeries = nonEmptySeries[nonEmptySeries.length - 1];
+    if (lastSeries === undefined) {
+      return null;
+    }
+    const {
+      type,
+      seriesId
+    } = lastSeries;
+    const data = processedSeries[type].series[seriesId].data;
+    const startIndex = currentItem?.dataIndex == null ? data.length - 1 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = findVisibleDataIndex({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: -1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
+    return {
+      type,
+      seriesId,
+      dataIndex: visibleDataIndex
+    };
+  };
 }

package/internals/components/AxisSharedComponents.mjs

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import { styled } from '@mui/material/styles';
 import { axisClasses } from "../../ChartsAxis/axisClasses.mjs";
 export const AxisRoot = styled('g', {

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;