@mui/x-charts 9.13.0 → 9.14.0

package/CHANGELOG.md

@@ -1,5 +1,154 @@
 # Changelog
 
+## 9.14.0
+
+_Sep 17, 2026_
+
+We'd like to extend a big thank you to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hebrew (he-IL) locale to the Scheduler
+- 📅 Scheduler time grid now opens at 7 AM by default, configurable with the new `initialScrollTime` prop
+- 🗓️ Auto-scheduling engine for finish-to-start dependencies in the Premium Event Timeline
+- 🧩 New content slots for the Event Timeline event block and resource title cell
+- ♿️ Charts announce the visible zoom range to screen readers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@eterry1388, @jamesDin, @kareem-ib, @mateuseap, @mustafajw07
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.14.0`
+
+- [DataGrid] Do not crash on unmount when the document has no body (#23431) @eterry1388
+- [DataGrid] Fix `MissingRowIdError` on cell `mousedown`/`mouseup` after row removal (#23261) @kareem-ib
+- [DataGrid] Fix quick filter dropping a pending search on parser identity change (#23575) @michelengelen
+- [DataGrid] Keep overlays sticky in RTL mode (#23492) @arminmeh
+- [DataGrid] Prevent scroll area state update before mount (#23478) @michelengelen
+- [DataGrid] Remove `'menu'` role from the actions cell (#23437) @michelengelen
+
+#### `@mui/x-data-grid-pro@9.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.14.0`, plus:
+
+- [DataGridPro] Fix data integrity issue in nested server data (#23518) @MBilalShafi
+- [DataGridPro] Keep parent selection when lazily loaded children arrive (#23421) @michelengelen
+
+#### `@mui/x-data-grid-premium@9.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.14.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.14.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.14.0`
+
+- [charts] Announce the visible zoom range to screen readers (#23371) @JCQuintas
+- [charts] Fix Premium chart zoom props and `apiRef` forwarding (#23590) @bernardobelchior
+
+#### `@mui/x-charts-pro@9.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.14.0`.
+
+#### `@mui/x-charts-premium@9.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.14.0`, plus:
+
+- [charts-premium] Add the Excel data extraction layer (#23569) @JCQuintas
+- [charts-premium] Forward `apiRef` on `RadialBarChart` and `RadialLineChart` (#23625) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.14.0`
+
+- [tree view] Optimize lazy loading store writes for nested children (#23489) @noraleonte
+- [tree view] Prune stale children when replacing an item's children (#23598) @JCQuintas
+
+#### `@mui/x-tree-view-pro@9.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.14.0`.
+
+### Scheduler
+
+#### Breaking changes
+
+- The `dataSource` prop has been removed from the Community Event Calendar components:
+  `EventCalendar`, `StandaloneDayView`, `StandaloneWeekView`, `StandaloneMonthView`,
+  `StandaloneAgendaView`, `StandaloneCompactDayView`, `StandaloneCompactThreeDayView` and
+  `StandaloneCompactWeekView`.
+
+  Lazy loading has always been Premium-only, and the prop never had any effect on these
+  components: it left the calendar in a permanent loading state. To load events through a data
+  source, use `EventCalendarPremium` (or the Premium standalone views) and `EventTimelinePremium`,
+  where `dataSource` is unchanged.
+
+  ```diff
+  -import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+  +import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';
+
+  -<EventCalendar dataSource={dataSource} />
+  +<EventCalendarPremium dataSource={dataSource} />
+  ```
+
+#### `@mui/x-scheduler@9.0.0-beta.12`
+
+- [l10n] Add Hebrew (he-IL) locale (#23577) @jamesDin
+- [scheduler] Add content slots for the Event Timeline event block and resource title cell (#23557) @rita-codes
+- [scheduler] Fix `onPreferencesChange` never being called on `EventCalendar` (#23568) @rita-codes
+- [scheduler] Fix flaky timeline observer absorb (#23523) @JCQuintas
+- [scheduler] Open the time grid at 7 AM by default and add `initialScrollTime` (#23594) @rita-codes
+- [scheduler] Pin sibling scheduler packages to exact versions (#23574) @rita-codes
+- [scheduler] Read form initialization settings without subscriptions (#23614) @flaviendelangle
+- [scheduler] Remove `dataSource` from the Community components (#23483) @mustafajw07
+- [scheduler] Remove redundant recurrence subscriptions (#23610) @flaviendelangle
+- [scheduler] Remove unused more-events popover count (#23619) @flaviendelangle
+- [scheduler] Remove unused refs (#23616) @flaviendelangle
+- [scheduler] Reuse precomputed timeline duration (#23620) @flaviendelangle
+- [scheduler] Reuse recurrence option labels (#23609) @flaviendelangle
+- [scheduler] Reuse recurrence presets for form drafts (#23615) @flaviendelangle
+- [scheduler] Simplify month-view overflow counting (#23617) @flaviendelangle
+- [scheduler] Use form store state to guard submissions (#23613) @flaviendelangle
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.12` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.12`, plus:
+
+- [scheduler-premium] Dependencies - Arrows and terminals for SS, FF and SF (#23524) @rita-codes
+- [scheduler-premium] Dependencies - Auto-scheduling engine (FS) (#23439) @rita-codes
+
+### Docs
+
+- [DataGrid][docs] Fix "Apply filters on demand" demo (#23602) @mateuseap
+- [docs] Add recipe for getting the tree view's root DOM element via `ref` (#22941) @michelengelen
+- [docs][pickers] Mention `Moment.js` maintenance mode (#23601) @mateuseap
+
+### Core
+
+- [code-infra] Gate the `DataGridScrollRestoration` screenshot on the horizontal restore (#23527) @JCQuintas
+- [code-infra] Let the `NoColumnsOverlay` demo settle before screenshotting (#23529) @JCQuintas
+- [code-infra] Pin the only-allow version in the preinstall hook (#23551) @Janpot
+- [code-infra] Remove disabled Discord release announcement workflow (#23554) @Janpot
+- [code-infra] Trial: Claude CI flake-fix caller (#23556) @Janpot
+
+### Miscellaneous
+
+- [chat] Add feedback form to the docs (#23403) @hasdfa
+- [ci] Grant actions: read to the flake-fix caller (#23560) @Janpot
+- [ci] Update flake-fix caller to mui-public#1849 (#23571) @Janpot
+
 ## 9.13.0
 
 <!-- generated comparing v9.12.0..master -->

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.13.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.13.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;
+}

package/internals/components/ChartsAccessibilityProxy/useZoomAnnouncement.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+import * as React from 'react';
+import { useChartsLocalization } from "../../../hooks/index.mjs";
+import { useStore } from "../../store/useStore.mjs";
+import { selectorChartsZoomAnnouncement } from "../../plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
+import { selectorChartZoomMap, selectorChartZoomOptionsLookup } from "../../plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+
+/**
+ * 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 function useZoomAnnouncement() {
+  const store = useStore();
+  const announcement = store.use(selectorChartsZoomAnnouncement);
+  const zoomMap = store.use(selectorChartZoomMap);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const {
+    localeText
+  } = 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;
+}

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -192,6 +192,11 @@ const useChartKeyboardNavigation = ({
   });
   const activationRegistrationsRef = React.useRef(new Map());
   const nextRegistrationIdRef = React.useRef(0);
+  const announceZoomChange = React.useCallback(() => {
+    store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
+      zoomAnnouncement: store.state.keyboardNavigation.zoomAnnouncement + 1
+    }));
+  }, [store]);
   const registerItemActivationHandler = React.useCallback((scope, handler) => {
     const registrationId = nextRegistrationIdRef.current;
     nextRegistrationIdRef.current += 1;
@@ -219,10 +224,13 @@ const useChartKeyboardNavigation = ({
       if (root && next !== null && root.contains(next)) {
         return;
       }
-      if (store.state.keyboardNavigation.isFocused) {
-        store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
+      const keyboardNavigation = store.state.keyboardNavigation;
+      if (keyboardNavigation.isFocused || keyboardNavigation.zoomAnnouncement > 0) {
+        store.set('keyboardNavigation', (0, _extends2.default)({}, keyboardNavigation, {
           isFocused: false,
-          isFocusVisible: false
+          isFocusVisible: false,
+          // The visible range is only announced while the user operates the chart.
+          zoomAnnouncement: 0
         }));
       }
     }
@@ -345,7 +353,8 @@ const useChartKeyboardNavigation = ({
   return {
     instance: {
       focusItem,
-      registerItemActivationHandler
+      registerItemActivationHandler,
+      announceZoomChange
     }
   };
 };
@@ -355,7 +364,8 @@ useChartKeyboardNavigation.getInitialState = params => ({
     item: null,
     isFocused: false,
     isFocusVisible: false,
-    enabled: !params.disableKeyboardNavigation
+    enabled: !params.disableKeyboardNavigation,
+    zoomAnnouncement: 0
   }
 });
 useChartKeyboardNavigation.params = {

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.mjs

@@ -186,6 +186,11 @@ export const useChartKeyboardNavigation = ({
   });
   const activationRegistrationsRef = React.useRef(new Map());
   const nextRegistrationIdRef = React.useRef(0);
+  const announceZoomChange = React.useCallback(() => {
+    store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
+      zoomAnnouncement: store.state.keyboardNavigation.zoomAnnouncement + 1
+    }));
+  }, [store]);
   const registerItemActivationHandler = React.useCallback((scope, handler) => {
     const registrationId = nextRegistrationIdRef.current;
     nextRegistrationIdRef.current += 1;
@@ -213,10 +218,13 @@ export const useChartKeyboardNavigation = ({
       if (root && next !== null && root.contains(next)) {
         return;
       }
-      if (store.state.keyboardNavigation.isFocused) {
-        store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
+      const keyboardNavigation = store.state.keyboardNavigation;
+      if (keyboardNavigation.isFocused || keyboardNavigation.zoomAnnouncement > 0) {
+        store.set('keyboardNavigation', _extends({}, keyboardNavigation, {
           isFocused: false,
-          isFocusVisible: false
+          isFocusVisible: false,
+          // The visible range is only announced while the user operates the chart.
+          zoomAnnouncement: 0
         }));
       }
     }
@@ -339,7 +347,8 @@ export const useChartKeyboardNavigation = ({
   return {
     instance: {
       focusItem,
-      registerItemActivationHandler
+      registerItemActivationHandler,
+      announceZoomChange
     }
   };
 };
@@ -348,7 +357,8 @@ useChartKeyboardNavigation.getInitialState = params => ({
     item: null,
     isFocused: false,
     isFocusVisible: false,
-    enabled: !params.disableKeyboardNavigation
+    enabled: !params.disableKeyboardNavigation,
+    zoomAnnouncement: 0
   }
 });
 useChartKeyboardNavigation.params = {

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.mts

@@ -20,6 +20,9 @@ export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugi
 export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => FocusedItemIdentifier<keyof import("../../../index.mjs").ChartsSeriesConfig> | null;
+export declare const selectorChartsZoomAnnouncement: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -20,6 +20,9 @@ export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugi
 export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
+export declare const selectorChartsZoomAnnouncement: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsFocusVisible = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
+exports.selectorChartsZoomAnnouncement = exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsFocusVisible = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
 var _store = require("@mui/x-internals/store");
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -26,6 +26,7 @@ const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store
  * - will be focused when user focuses the chart
  */
 const selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
+const selectorChartsZoomAnnouncement = exports.selectorChartsZoomAnnouncement = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.zoomAnnouncement ?? 0);
 const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
 const selectKeyboardActivationFeature = state => state.experimentalFeatures?.keyboardActivation;
 const selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, selectKeyboardActivationFeature, (keyboardNavigationState, keyboardActivation) => keyboardActivation === true && !!keyboardNavigationState?.enabled);

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.mjs

@@ -20,6 +20,7 @@ export const selectorChartsFocusedItem = createSelector(selectKeyboardNavigation
  * - will be focused when user focuses the chart
  */
 export const selectorChartsFocusedOrToFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
+export const selectorChartsZoomAnnouncement = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.zoomAnnouncement ?? 0);
 export const selectorChartsIsKeyboardNavigationEnabled = createSelector(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
 const selectKeyboardActivationFeature = state => state.experimentalFeatures?.keyboardActivation;
 export const selectorChartsIsKeyboardActivationEnabled = createSelector(selectKeyboardNavigation, selectKeyboardActivationFeature, (keyboardNavigationState, keyboardActivation) => keyboardActivation === true && !!keyboardNavigationState?.enabled);

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.mts

@@ -58,6 +58,12 @@ export interface UseChartKeyboardNavigationInstance {
    * @returns {() => void} A cleanup function unregistering the handler.
    */
   registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+  /**
+   * Asks for the visible zoom range to be announced to screen readers.
+   * Called by the plugin owning keyboard zoom and pan, on each change the user makes with the keys.
+   * @returns {void}
+   */
+  announceZoomChange: () => void;
 }
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
@@ -78,6 +84,12 @@ export interface UseChartKeyboardNavigationState {
      * Indicates whether keyboard navigation is enabled or not.
      */
     enabled: boolean;
+    /**
+     * Incremented on each zoom change the user makes with the keyboard, and reset when the chart
+     * loses focus. The live region reads the visible range when it changes, so a zoom coming from
+     * the pointer or from the application is not announced.
+     */
+    zoomAnnouncement: number;
   };
 }
 type UseChartKeyboardNavigationParameters = {

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.ts

@@ -58,6 +58,12 @@ export interface UseChartKeyboardNavigationInstance {
    * @returns {() => void} A cleanup function unregistering the handler.
    */
   registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+  /**
+   * Asks for the visible zoom range to be announced to screen readers.
+   * Called by the plugin owning keyboard zoom and pan, on each change the user makes with the keys.
+   * @returns {void}
+   */
+  announceZoomChange: () => void;
 }
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
@@ -78,6 +84,12 @@ export interface UseChartKeyboardNavigationState {
      * Indicates whether keyboard navigation is enabled or not.
      */
     enabled: boolean;
+    /**
+     * Incremented on each zoom change the user makes with the keyboard, and reset when the chart
+     * loses focus. The live region reads the visible range when it changes, so a zoom coming from
+     * the pointer or from the application is not announced.
+     */
+    zoomAnnouncement: number;
   };
 }
 type UseChartKeyboardNavigationParameters = {

package/locales/elGR.d.mts

@@ -114,6 +114,11 @@ export declare const elGR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/elGR.d.ts

@@ -114,6 +114,11 @@ export declare const elGR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/elGR.js

@@ -125,6 +125,14 @@ const elGRLocaleText = exports.elGRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/elGR.mjs

@@ -119,6 +119,14 @@ export const elGRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/enUS.d.mts

@@ -115,6 +115,11 @@ export declare const enUS: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/enUS.d.ts

@@ -115,6 +115,11 @@ export declare const enUS: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/enUS.js

@@ -125,6 +125,14 @@ const enUSLocaleText = exports.enUSLocaleText = {
   // Accessibility descriptions
   a11yNoValue: 'no value',
   a11yConnector: '; ',
+  zoomRangeDescription: function zoomRangeDescription({
+    axisDirection,
+    start,
+    end
+  }) {
+    const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+    return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  },
   barDescription: function barDescription({
     value,
     formattedValue,

package/locales/enUS.mjs

@@ -120,6 +120,14 @@ export const enUSLocaleText = {
   // Accessibility descriptions
   a11yNoValue: 'no value',
   a11yConnector: '; ',
+  zoomRangeDescription: function zoomRangeDescription({
+    axisDirection,
+    start,
+    end
+  }) {
+    const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+    return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  },
   barDescription: function barDescription({
     value,
     formattedValue,

package/locales/frFR.d.mts

@@ -114,6 +114,11 @@ export declare const frFR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/frFR.d.ts

@@ -114,6 +114,11 @@ export declare const frFR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/frFR.js

@@ -125,6 +125,14 @@ const frFRLocalText = exports.frFRLocalText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/frFR.mjs

@@ -119,6 +119,14 @@ export const frFRLocalText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/nbNO.d.mts

@@ -114,6 +114,11 @@ export declare const nbNO: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/nbNO.d.ts

@@ -114,6 +114,11 @@ export declare const nbNO: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/nbNO.js

@@ -125,6 +125,14 @@ const nbNOLocaleText = exports.nbNOLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/nbNO.mjs

@@ -119,6 +119,14 @@ export const nbNOLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/ptBR.d.mts

@@ -114,6 +114,11 @@ export declare const ptBR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/ptBR.d.ts

@@ -114,6 +114,11 @@ export declare const ptBR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/ptBR.js

@@ -125,6 +125,14 @@ const ptBRLocaleText = exports.ptBRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/ptBR.mjs

@@ -119,6 +119,14 @@ export const ptBRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/ptPT.d.mts

@@ -114,6 +114,11 @@ export declare const ptPT: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/ptPT.d.ts

@@ -114,6 +114,11 @@ export declare const ptPT: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/ptPT.js

@@ -124,6 +124,14 @@ const ptPTLocaleText = exports.ptPTLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/ptPT.mjs

@@ -118,6 +118,14 @@ export const ptPTLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/svSE.d.mts

@@ -114,6 +114,11 @@ export declare const svSE: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/svSE.d.ts

@@ -114,6 +114,11 @@ export declare const svSE: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/svSE.js

@@ -127,6 +127,14 @@ const svSELocaleText = exports.svSELocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/svSE.mjs

@@ -121,6 +121,14 @@ export const svSELocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/utils/chartsLocaleTextApi.d.mts

@@ -440,6 +440,20 @@ export interface ChartsLocaleText {
    * The string used to merge description values.
    */
   a11yConnector: string;
+  /**
+   * The description of the visible range of a zoomable axis for accessibility purpose.
+   * It is announced when the user zooms or pans the chart with the keyboard.
+   * @param {object} params - The parameters for the description getter.
+   * @param {'x'|'y'} params.axisDirection - The direction of the zoomed axis.
+   * @param {number} params.start - The start of the visible range, as a percentage of the axis extent.
+   * @param {number} params.end - The end of the visible range, as a percentage of the axis extent.
+   * @returns {string} The localized description of the visible range.
+   */
+  zoomRangeDescription: (params: {
+    axisDirection: 'x' | 'y';
+    start: number;
+    end: number;
+  }) => string;
   /**
    * The description of a bar series item for accessibility purpose.
    * @param {object} params - The parameters for the description getter.

package/locales/utils/chartsLocaleTextApi.d.ts

@@ -440,6 +440,20 @@ export interface ChartsLocaleText {
    * The string used to merge description values.
    */
   a11yConnector: string;
+  /**
+   * The description of the visible range of a zoomable axis for accessibility purpose.
+   * It is announced when the user zooms or pans the chart with the keyboard.
+   * @param {object} params - The parameters for the description getter.
+   * @param {'x'|'y'} params.axisDirection - The direction of the zoomed axis.
+   * @param {number} params.start - The start of the visible range, as a percentage of the axis extent.
+   * @param {number} params.end - The end of the visible range, as a percentage of the axis extent.
+   * @returns {string} The localized description of the visible range.
+   */
+  zoomRangeDescription: (params: {
+    axisDirection: 'x' | 'y';
+    start: number;
+    end: number;
+  }) => string;
   /**
    * The description of a bar series item for accessibility purpose.
    * @param {object} params - The parameters for the description getter.

package/locales/utils/getChartsLocalization.d.mts

@@ -118,6 +118,11 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/utils/getChartsLocalization.d.ts

@@ -118,6 +118,11 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.13.0",
+  "version": "9.14.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "@babel/runtime": "^7.29.7",
     "@mui/utils": "^9.4.0",
     "@mui/x-charts-vendor": "^9.13.0",
-    "@mui/x-internal-gestures": "^9.13.0",
-    "@mui/x-internals": "^9.13.0",
-    "bezier-easing": "^3.0.1",
+    "@mui/x-internal-gestures": "^9.14.0",
+    "@mui/x-internals": "^9.14.0",
+    "bezier-easing": "^3.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.2.0",
-    "use-sync-external-store": "^1.6.0"
+    "use-sync-external-store": "^1.7.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",