@mui/x-charts 9.12.0 → 9.14.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs

@@ -5,6 +5,9 @@ import { selectorChartXAxisDomainsForAutoSize, selectorChartYAxisDomainsForAutoS
 
 // Direct state access to avoid circular dependency
 const selectorIsHydrated = state => state.dimensions.width && state.dimensions.height;
+
+// Direct state access to avoid circular dependency
+const selectorDefaultTickLabelStyle = state => state.cartesianAxis?.defaultTickLabelStyle;
 const EMPTY_SIZES = {};
 const EMPTY_RESULTS = {};
 
@@ -12,7 +15,7 @@ const EMPTY_RESULTS = {};
  * Selector that computes full auto-size results for X axes that have `height: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selectorChartRawXAxis, selectorIsHydrated, selectorChartXAxisDomainsForAutoSize, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap) {
+export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selectorChartRawXAxis, selectorIsHydrated, selectorChartXAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = xAxes?.some(axis => axis.height === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -24,7 +27,8 @@ export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selector
       const computed = computeAxisAutoSize({
         axis,
         direction: 'x',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;
@@ -53,7 +57,7 @@ export const selectorChartXAxisAutoSizes = createSelectorMemoized(selectorChartX
  * Selector that computes full auto-size results for Y axes that have `width: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selectorChartRawYAxis, selectorIsHydrated, selectorChartYAxisDomainsForAutoSize, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap) {
+export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selectorChartRawYAxis, selectorIsHydrated, selectorChartYAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = yAxes?.some(axis => axis.width === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -65,7 +69,8 @@ export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selector
       const computed = computeAxisAutoSize({
         axis,
         direction: 'y',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -10,6 +10,7 @@ exports.useChartCartesianAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _store = require("@mui/x-internals/store");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
@@ -23,6 +24,15 @@ var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 var _getAxisClickPayload = require("./getAxisClickPayload");
+var _useDefaultTickLabelStyle = require("../../../useDefaultTickLabelStyle");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
+/**
+ * Narrows an axis item to one the axis actually has a value for.
+ * Axes unrelated to the focused series can exist with empty data, so the index must resolve.
+ */
+function hasAxisValueAt(axes, item) {
+  return item !== undefined && item.dataIndex !== undefined && axes[item.axisId]?.data?.[item.dataIndex] !== undefined;
+}
 const useChartCartesianAxis = ({
   params,
   store,
@@ -39,6 +49,12 @@ const useChartCartesianAxis = ({
     onTooltipAxisChange,
     axesGap
   } = params;
+  const defaultTickLabelStyle = (0, _useDefaultTickLabelStyle.useDefaultTickLabelStyle)();
+  (0, _useEnhancedEffect.default)(() => {
+    store.set('cartesianAxis', (0, _extends2.default)({}, store.state.cartesianAxis, {
+      defaultTickLabelStyle
+    }));
+  }, [defaultTickLabelStyle, store]);
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
     const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
@@ -92,9 +108,10 @@ const useChartCartesianAxis = ({
     store.set('cartesianAxis', {
       axesGap,
       x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset, axesGap),
-      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap)
+      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap),
+      defaultTickLabelStyle
     });
-  }, [xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, defaultTickLabelStyle, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   (0, _store.useStoreEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -197,7 +214,62 @@ const useChartCartesianAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+  }, [params.onAxisClick, processedSeries, store, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+
+  /**
+   * Kept separate from the pointer effect: this listener must survive re-renders, so it reads the
+   * axes and the callback when the key is pressed rather than closing over them. Re-subscribing per
+   * render would drop keystrokes landing between a keyboard navigation update and its commit.
+   */
+  const handleKeyboardActivation = (0, _useEventCallback.default)(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !(0, _useChartKeyboardNavigation.isItemActivationKey)(event) || !(0, _useChartKeyboardNavigation.selectorChartsIsKeyboardActivationEnabled)(store.state)) {
+      return;
+    }
+    const {
+      axis: xAxes
+    } = (0, _useChartCartesianAxisRendering.selectorChartXAxis)(store.state);
+    const {
+      axis: yAxes
+    } = (0, _useChartCartesianAxisRendering.selectorChartYAxis)(store.state);
+    const xAxisItem = (0, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex)(store.state);
+    const yAxisItem = (0, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex)(store.state);
+    const focusedAxisItem = hasAxisValueAt(xAxes, xAxisItem) ? {
+      item: xAxisItem,
+      isXAxis: true
+    } : hasAxisValueAt(yAxes, yAxisItem) && {
+      item: yAxisItem,
+      isXAxis: false
+    };
+    if (!focusedAxisItem) {
+      return;
+    }
+    const payload = (0, _getAxisClickPayload.getAxisClickPayload)({
+      axisId: focusedAxisItem.item.axisId,
+      dataIndex: focusedAxisItem.item.dataIndex,
+      isXAxis: focusedAxisItem.isXAxis,
+      axes: focusedAxisItem.isXAxis ? xAxes : yAxes,
+      processedSeries: (0, _useChartSeries.selectorChartSeriesProcessed)(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.mjs

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
@@ -16,6 +17,16 @@ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/i
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.mjs";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
 import { getAxisClickPayload } from "./getAxisClickPayload.mjs";
+import { useDefaultTickLabelStyle } from "../../../useDefaultTickLabelStyle.mjs";
+import { isItemActivationKey, selectorChartsIsKeyboardActivationEnabled, selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/index.mjs";
+
+/**
+ * Narrows an axis item to one the axis actually has a value for.
+ * Axes unrelated to the focused series can exist with empty data, so the index must resolve.
+ */
+function hasAxisValueAt(axes, item) {
+  return item !== undefined && item.dataIndex !== undefined && axes[item.axisId]?.data?.[item.dataIndex] !== undefined;
+}
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -32,6 +43,12 @@ export const useChartCartesianAxis = ({
     onTooltipAxisChange,
     axesGap
   } = params;
+  const defaultTickLabelStyle = useDefaultTickLabelStyle();
+  useEnhancedEffect(() => {
+    store.set('cartesianAxis', _extends({}, store.state.cartesianAxis, {
+      defaultTickLabelStyle
+    }));
+  }, [defaultTickLabelStyle, store]);
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
     const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
@@ -85,9 +102,10 @@ export const useChartCartesianAxis = ({
     store.set('cartesianAxis', {
       axesGap,
       x: defaultizeXAxis(xAxis, dataset, axesGap),
-      y: defaultizeYAxis(yAxis, dataset, axesGap)
+      y: defaultizeYAxis(yAxis, dataset, axesGap),
+      defaultTickLabelStyle
     });
-  }, [xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, defaultTickLabelStyle, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -190,7 +208,62 @@ export const useChartCartesianAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+  }, [params.onAxisClick, processedSeries, store, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+
+  /**
+   * Kept separate from the pointer effect: this listener must survive re-renders, so it reads the
+   * axes and the callback when the key is pressed rather than closing over them. Re-subscribing per
+   * render would drop keystrokes landing between a keyboard navigation update and its commit.
+   */
+  const handleKeyboardActivation = useEventCallback(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !isItemActivationKey(event) || !selectorChartsIsKeyboardActivationEnabled(store.state)) {
+      return;
+    }
+    const {
+      axis: xAxes
+    } = selectorChartXAxis(store.state);
+    const {
+      axis: yAxes
+    } = selectorChartYAxis(store.state);
+    const xAxisItem = selectorChartsKeyboardXAxisIndex(store.state);
+    const yAxisItem = selectorChartsKeyboardYAxisIndex(store.state);
+    const focusedAxisItem = hasAxisValueAt(xAxes, xAxisItem) ? {
+      item: xAxisItem,
+      isXAxis: true
+    } : hasAxisValueAt(yAxes, yAxisItem) && {
+      item: yAxisItem,
+      isXAxis: false
+    };
+    if (!focusedAxisItem) {
+      return;
+    }
+    const payload = getAxisClickPayload({
+      axisId: focusedAxisItem.item.axisId,
+      dataIndex: focusedAxisItem.item.dataIndex,
+      isXAxis: focusedAxisItem.isXAxis,
+      axes: focusedAxisItem.isXAxis ? xAxes : yAxes,
+      processedSeries: selectorChartSeriesProcessed(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {};
 };
 useChartCartesianAxis.params = {

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

@@ -7,6 +7,8 @@ import type { UseChartInteractionSignature } from "../useChartInteraction/index.
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.mjs";
 import type { UseChartBrushSignature } from "../useChartBrush/index.mjs";
 import type { SamplingState } from "./sampling.types.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
+import type { ChartsTextStyle } from "../../../getWordsByLines.mjs";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -34,10 +36,10 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
   /**
    * 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?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
   /**
    * The function called when the pointer position corresponds to a new axis data item.
    * This update can either be caused by a pointer movement, or an axis update.
@@ -106,6 +108,8 @@ export interface UseChartCartesianAxisState {
     axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
+    /** Only used to measure tick labels. Never merged into the rendered tick style. */
+    defaultTickLabelStyle?: ChartsTextStyle;
   };
   /**
    * The controlled axis item highlighted.

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

@@ -7,6 +7,8 @@ import type { UseChartInteractionSignature } from "../useChartInteraction/index.
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 import type { UseChartBrushSignature } from "../useChartBrush/index.js";
 import type { SamplingState } from "./sampling.types.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
+import type { ChartsTextStyle } from "../../../getWordsByLines.js";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -34,10 +36,10 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
   /**
    * 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?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
   /**
    * The function called when the pointer position corresponds to a new axis data item.
    * This update can either be caused by a pointer movement, or an axis update.
@@ -106,6 +108,8 @@ export interface UseChartCartesianAxisState {
     axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
+    /** Only used to measure tick labels. Never merged into the rendered tick style. */
+    defaultTickLabelStyle?: ChartsTextStyle;
   };
   /**
    * The controlled axis item highlighted.

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.mts

@@ -5,6 +5,7 @@ export declare const selectorChartCartesianAxisState: (state: ChartState<[], [Us
   axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
+  defaultTickLabelStyle?: import("../../../getWordsByLines.mjs").ChartsTextStyle;
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.ts

@@ -5,6 +5,7 @@ export declare const selectorChartCartesianAxisState: (state: ChartState<[], [Us
   axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
+  defaultTickLabelStyle?: import("../../../getWordsByLines.js").ChartsTextStyle;
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;

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

@@ -20,6 +20,9 @@ var _useChartSeries2 = require("../../corePlugins/useChartSeries");
 var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _getChartPoint = require("../../../getChartPoint");
 var _getItemAtAxisPosition = require("./utils/getItemAtAxisPosition");
+var _getItemAtRotationIndex = require("./utils/getItemAtRotationIndex");
+var _useChartPolarAxis = require("../useChartPolarAxis/useChartPolarAxis.selectors");
+var _useChartPolarInteraction = require("../useChartPolarAxis/useChartPolarInteraction.selectors");
 var _itemActivation = require("./itemActivation");
 var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.selectors");
 /**
@@ -137,33 +140,63 @@ const useChartKeyboardNavigation = ({
   });
 
   /**
-   * The item a click landed on, read from the item the pointer is over. Falls back to the axis
-   * under the pointer, which covers the line and area paths, whose hovered item only knows its
-   * series.
+   * The item a click landed on, read from the item the pointer is over. An area or line path only
+   * knows its series, and a radar reports no item at all, so an incomplete one falls back to the
+   * axis under the pointer.
    *
    * A click that resolves nothing is left alone rather than focusing the chart. The drawing area
    * is a rectangle, but the data rarely fills it: taking the focus from a click next to a pie,
    * outside its circle, reads as the chart grabbing clicks that were not meant for it.
    */
   const resolveItemAtPointer = (0, _useEventCallback.default)(event => {
-    // Every series reports the item under the pointer, so the click itself needs no wiring.
+    const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
     const hoveredItem = store.state.interaction?.hoveredItem;
-    if (hoveredItem != null) {
-      return hoveredItem;
+    // Cleaned before the check, because what a series stores is not always an identifier: the
+    // scatter reports its whole data point, whose optional `id` would read as an incomplete one.
+    const cleanedHoveredItem = hoveredItem == null ? null : (0, _cleanIdentifier.cleanIdentifier)(seriesConfig, hoveredItem);
+
+    // Series that report a complete item need no further wiring.
+    if (cleanedHoveredItem != null && isCompleteFocusIdentifier(cleanedHoveredItem)) {
+      return cleanedHoveredItem;
     }
     const element = chartsLayerContainerRef.current;
     const point = element === null ? null : (0, _getChartPoint.getChartPoint)(element, event);
-    const item = point && instance.isPointInside?.(point.x, point.y) ? (0, _getItemAtAxisPosition.getItemAtAxisPosition)({
+    if (!point || !instance.isPointInside?.(point.x, point.y)) {
+      return null;
+    }
+    const processedSeries = (0, _useChartSeries2.selectorChartSeriesProcessed)(store.state);
+    // An incomplete hovered item still names the series under the pointer, which is a better
+    // target than the focused one: a click on a series should stay on it.
+    const focusedItem = cleanedHoveredItem ?? store.state.keyboardNavigation.item;
+    const item = (0, _getItemAtAxisPosition.getItemAtAxisPosition)({
       point,
       xAxis: (0, _useChartCartesianAxisRendering.selectorChartXAxis)(store.state),
       yAxis: (0, _useChartCartesianAxisRendering.selectorChartYAxis)(store.state),
-      processedSeries: (0, _useChartSeries2.selectorChartSeriesProcessed)(store.state),
-      focusedItem: store.state.keyboardNavigation.item
-    }) : null;
-    return item;
+      processedSeries,
+      focusedItem
+    });
+    if (item !== null) {
+      return item;
+    }
+
+    // A radar area only covers the polygon the data draws, so a click inside the chart but outside
+    // it resolves nothing above. Fall back to the rotation axis, the same one the highlight uses.
+    if ((0, _useChartPolarAxis.selectorChartRotationAxis)(store.state).axisIds.length === 0) {
+      return null;
+    }
+    return (0, _getItemAtRotationIndex.getItemAtRotationIndex)({
+      dataIndex: (0, _useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex)(store.state),
+      processedSeries,
+      focusedItem
+    });
   });
   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;
@@ -191,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
         }));
       }
     }
@@ -240,6 +276,11 @@ const useChartKeyboardNavigation = ({
       handler(event, focusedItem);
     }
     function keyboardHandler(event) {
+      // Item navigation only uses unmodified keys.
+      // Modified ones are left to the browser, and to chart interactions such as keyboard zoom and pan.
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
       let seriesType = newFocusedItem?.type;
@@ -312,7 +353,8 @@ const useChartKeyboardNavigation = ({
   return {
     instance: {
       focusItem,
-      registerItemActivationHandler
+      registerItemActivationHandler,
+      announceZoomChange
     }
   };
 };
@@ -322,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

@@ -13,6 +13,9 @@ import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/i
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
 import { getChartPoint } from "../../../getChartPoint.mjs";
 import { getItemAtAxisPosition } from "./utils/getItemAtAxisPosition.mjs";
+import { getItemAtRotationIndex } from "./utils/getItemAtRotationIndex.mjs";
+import { selectorChartRotationAxis } from "../useChartPolarAxis/useChartPolarAxis.selectors.mjs";
+import { selectorChartsInteractionRotationAxisIndex } from "../useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { findItemActivationHandler, isItemActivationKey } from "./itemActivation.mjs";
 import { selectorChartsIsFocusVisible, selectorChartsIsKeyboardActivationEnabled } from "./useChartKeyboardNavigation.selectors.mjs";
 
@@ -131,33 +134,63 @@ export const useChartKeyboardNavigation = ({
   });
 
   /**
-   * The item a click landed on, read from the item the pointer is over. Falls back to the axis
-   * under the pointer, which covers the line and area paths, whose hovered item only knows its
-   * series.
+   * The item a click landed on, read from the item the pointer is over. An area or line path only
+   * knows its series, and a radar reports no item at all, so an incomplete one falls back to the
+   * axis under the pointer.
    *
    * A click that resolves nothing is left alone rather than focusing the chart. The drawing area
    * is a rectangle, but the data rarely fills it: taking the focus from a click next to a pie,
    * outside its circle, reads as the chart grabbing clicks that were not meant for it.
    */
   const resolveItemAtPointer = useEventCallback(event => {
-    // Every series reports the item under the pointer, so the click itself needs no wiring.
+    const seriesConfig = selectorChartSeriesConfig(store.state);
     const hoveredItem = store.state.interaction?.hoveredItem;
-    if (hoveredItem != null) {
-      return hoveredItem;
+    // Cleaned before the check, because what a series stores is not always an identifier: the
+    // scatter reports its whole data point, whose optional `id` would read as an incomplete one.
+    const cleanedHoveredItem = hoveredItem == null ? null : cleanIdentifier(seriesConfig, hoveredItem);
+
+    // Series that report a complete item need no further wiring.
+    if (cleanedHoveredItem != null && isCompleteFocusIdentifier(cleanedHoveredItem)) {
+      return cleanedHoveredItem;
     }
     const element = chartsLayerContainerRef.current;
     const point = element === null ? null : getChartPoint(element, event);
-    const item = point && instance.isPointInside?.(point.x, point.y) ? getItemAtAxisPosition({
+    if (!point || !instance.isPointInside?.(point.x, point.y)) {
+      return null;
+    }
+    const processedSeries = selectorChartSeriesProcessed(store.state);
+    // An incomplete hovered item still names the series under the pointer, which is a better
+    // target than the focused one: a click on a series should stay on it.
+    const focusedItem = cleanedHoveredItem ?? store.state.keyboardNavigation.item;
+    const item = getItemAtAxisPosition({
       point,
       xAxis: selectorChartXAxis(store.state),
       yAxis: selectorChartYAxis(store.state),
-      processedSeries: selectorChartSeriesProcessed(store.state),
-      focusedItem: store.state.keyboardNavigation.item
-    }) : null;
-    return item;
+      processedSeries,
+      focusedItem
+    });
+    if (item !== null) {
+      return item;
+    }
+
+    // A radar area only covers the polygon the data draws, so a click inside the chart but outside
+    // it resolves nothing above. Fall back to the rotation axis, the same one the highlight uses.
+    if (selectorChartRotationAxis(store.state).axisIds.length === 0) {
+      return null;
+    }
+    return getItemAtRotationIndex({
+      dataIndex: selectorChartsInteractionRotationAxisIndex(store.state),
+      processedSeries,
+      focusedItem
+    });
   });
   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;
@@ -185,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
         }));
       }
     }
@@ -234,6 +270,11 @@ export const useChartKeyboardNavigation = ({
       handler(event, focusedItem);
     }
     function keyboardHandler(event) {
+      // Item navigation only uses unmodified keys.
+      // Modified ones are left to the browser, and to chart interactions such as keyboard zoom and pan.
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = selectorChartSeriesConfig(store.state);
       let seriesType = newFocusedItem?.type;
@@ -306,7 +347,8 @@ export const useChartKeyboardNavigation = ({
   return {
     instance: {
       focusItem,
-      registerItemActivationHandler
+      registerItemActivationHandler,
+      announceZoomChange
     }
   };
 };
@@ -315,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;