@mui/x-charts 9.0.0-alpha.4 → 9.0.0-beta.0

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

@@ -2,7 +2,6 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
@@ -14,35 +13,42 @@ export const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
-  const removeFocus = useEventCallback(function removeFocus() {
-    if (store.state.keyboardNavigation.isFocused) {
-      store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
-        isFocused: false
-      }));
-    }
-  });
-  const restoreFocus = useEventCallback(function restoreFocus() {
-    if (!store.state.keyboardNavigation.isFocused) {
-      store.update(_extends({}, store.state.highlight && {
-        highlight: _extends({}, store.state.highlight, {
-          lastUpdate: 'keyboard'
-        })
-      }, store.state.interaction && {
-        interaction: _extends({}, store.state.interaction, {
-          lastUpdate: 'keyboard'
-        })
-      }, {
-        keyboardNavigation: _extends({}, store.state.keyboardNavigation, {
-          isFocused: true
-        })
-      }));
-    }
-  });
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
       return undefined;
     }
+    function removeFocus(event) {
+      const root = event.currentTarget;
+      const next = event.relatedTarget;
+
+      // Avoid removing focus if we know it is moving to another children in the chart.
+      // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
+      if (root && next instanceof Node && !root.contains(next)) {
+        if (store.state.keyboardNavigation.isFocused) {
+          store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
+            isFocused: false
+          }));
+        }
+      }
+    }
+    function restoreFocus() {
+      if (!store.state.keyboardNavigation.isFocused) {
+        store.update(_extends({}, store.state.highlight && {
+          highlight: _extends({}, store.state.highlight, {
+            lastUpdate: 'keyboard'
+          })
+        }, store.state.interaction && {
+          interaction: _extends({}, store.state.interaction, {
+            lastUpdate: 'keyboard'
+          })
+        }, {
+          keyboardNavigation: _extends({}, store.state.keyboardNavigation, {
+            isFocused: true
+          })
+        }));
+      }
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = selectorChartSeriesConfig(store.state);
@@ -76,14 +82,14 @@ export const useChartKeyboardNavigation = ({
       }
     }
     element.addEventListener('keydown', keyboardHandler);
-    element.addEventListener('blur', removeFocus);
-    element.addEventListener('focus', restoreFocus);
+    element.addEventListener('focusout', removeFocus);
+    element.addEventListener('focusin', restoreFocus);
     return () => {
       element.removeEventListener('keydown', keyboardHandler);
-      element.removeEventListener('blur', removeFocus);
-      element.removeEventListener('focus', restoreFocus);
+      element.removeEventListener('focusout', removeFocus);
+      element.removeEventListener('focusin', restoreFocus);
     };
-  }, [chartsLayerContainerRef, removeFocus, restoreFocus, params.disableKeyboardNavigation, store]);
+  }, [chartsLayerContainerRef, params.disableKeyboardNavigation, store]);
   useEnhancedEffect(() => {
     store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
       enabled: !params.disableKeyboardNavigation

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

@@ -9,6 +9,14 @@ export declare const selectorChartsHasFocusedItem: (args_0: import("../../corePl
 export declare const selectorChartsFocusedItem: (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;
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+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 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

@@ -9,6 +9,14 @@ export declare const selectorChartsHasFocusedItem: (args_0: import("../../corePl
 export declare const selectorChartsFocusedItem: (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;
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+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 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.selectorChartsHasFocusedItem = exports.selectorChartsFocusedItem = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = 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");
@@ -12,6 +12,13 @@ const selectKeyboardNavigation = state => state.keyboardNavigation;
 const selectorChartsItemIsFocused = exports.selectorChartsItemIsFocused = (0, _store.createSelector)(selectKeyboardNavigation, (keyboardNavigationState, item) => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(keyboardNavigationState.item, item));
 const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null);
 const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true ? keyboardNavigationState?.item ?? null : null);
+
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+const selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
 
 /**
@@ -37,7 +44,7 @@ const createSelectAxisHighlight = direction => (item, axis, series) => {
 };
 const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
 const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
-const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _store.createSelector)(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
+const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _store.createSelectorMemoized)(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.isFocused !== true || keyboardState?.item == null) {
     return null;
   }

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

@@ -1,4 +1,4 @@
-import { createSelector } from '@mui/x-internals/store';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
@@ -6,6 +6,13 @@ const selectKeyboardNavigation = state => state.keyboardNavigation;
 export const selectorChartsItemIsFocused = createSelector(selectKeyboardNavigation, (keyboardNavigationState, item) => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null && fastObjectShallowCompare(keyboardNavigationState.item, item));
 export const selectorChartsHasFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null);
 export const selectorChartsFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true ? keyboardNavigationState?.item ?? null : null);
+
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+export const selectorChartsFocusedOrToFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 export const selectorChartsIsKeyboardNavigationEnabled = createSelector(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
 
 /**
@@ -31,7 +38,7 @@ const createSelectAxisHighlight = direction => (item, axis, series) => {
 };
 export const selectorChartsKeyboardXAxisIndex = createSelector(selectorChartsFocusedItem, selectorChartXAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
 export const selectorChartsKeyboardYAxisIndex = createSelector(selectorChartsFocusedItem, selectorChartYAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
-export const selectorChartsKeyboardItem = createSelector(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
+export const selectorChartsKeyboardItem = createSelectorMemoized(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.isFocused !== true || keyboardState?.item == null) {
     return null;
   }

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

@@ -7,7 +7,13 @@ import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
 export interface UseChartKeyboardNavigationInstance {}
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
+    /**
+     * The item with keyboard focus. It is `null` when no item is focused.
+     */
     item: null | FocusedItemIdentifier<ChartSeriesType>;
+    /**
+     * If `false` the focus is ignored, but we keep the item in the state to be able to restore it when focus is active again.
+     */
     isFocused: boolean;
     /**
      * Indicates whether keyboard navigation is enabled or not.

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

@@ -7,7 +7,13 @@ import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 export interface UseChartKeyboardNavigationInstance {}
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
+    /**
+     * The item with keyboard focus. It is `null` when no item is focused.
+     */
     item: null | FocusedItemIdentifier<ChartSeriesType>;
+    /**
+     * If `false` the focus is ignored, but we keep the item in the state to be able to restore it when focus is active again.
+     */
     isFocused: boolean;
     /**
      * Indicates whether keyboard navigation is enabled or not.

package/internals/store/useCharts.d.mts

@@ -12,7 +12,7 @@ import { type UseChartBaseProps } from "./useCharts.types.mjs";
  */
 export declare function useCharts<TSignatures extends readonly ChartAnyPluginSignature[] = []>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>): {
   contextValue: {
-    store: Store<ChartState<readonly [import("../plugins/corePlugins/index.mjs").UseChartElementRefSignature, import("../index.mjs").UseChartIdSignature, import("../index.mjs").UseChartSeriesConfigSignature<keyof import("../index.mjs").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartExperimentalFeature/index.mjs").UseChartExperimentalFeaturesSignature, import("../index.mjs").UseChartDimensionsSignature, import("../index.mjs").UseChartSeriesSignature<keyof import("../index.mjs").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartAnimation/index.mjs").UseChartAnimationSignature, import("../index.mjs").UseChartInteractionListenerSignature, ...TSignatures]>>;
+    store: Store<ChartState<readonly [import("../plugins/corePlugins/index.mjs").UseChartElementRefSignature, import("../index.mjs").UseChartIdSignature, import("../index.mjs").UseChartSeriesConfigSignature<keyof import("../index.mjs").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartExperimentalFeature/index.mjs").UseChartExperimentalFeaturesSignature<keyof import("../index.mjs").ChartsSeriesConfig>, import("../index.mjs").UseChartDimensionsSignature, import("../index.mjs").UseChartSeriesSignature<keyof import("../index.mjs").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartAnimation/index.mjs").UseChartAnimationSignature, import("../index.mjs").UseChartInteractionListenerSignature, ...TSignatures]>>;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
   };

package/internals/store/useCharts.d.ts

@@ -12,7 +12,7 @@ import { type UseChartBaseProps } from "./useCharts.types.js";
  */
 export declare function useCharts<TSignatures extends readonly ChartAnyPluginSignature[] = []>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>): {
   contextValue: {
-    store: Store<ChartState<readonly [import("../plugins/corePlugins/index.js").UseChartElementRefSignature, import("../index.js").UseChartIdSignature, import("../index.js").UseChartSeriesConfigSignature<keyof import("../index.js").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartExperimentalFeature/index.js").UseChartExperimentalFeaturesSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature<keyof import("../index.js").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]>>;
+    store: Store<ChartState<readonly [import("../plugins/corePlugins/index.js").UseChartElementRefSignature, import("../index.js").UseChartIdSignature, import("../index.js").UseChartSeriesConfigSignature<keyof import("../index.js").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartExperimentalFeature/index.js").UseChartExperimentalFeaturesSignature<keyof import("../index.js").ChartsSeriesConfig>, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature<keyof import("../index.js").ChartsSeriesConfig>, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]>>;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
   };

package/locales/elGR.d.mts

@@ -112,6 +112,82 @@ export declare const elGR: {
           high?: string | undefined;
           low?: string | undefined;
           close?: string | undefined;
+          a11yNoValue?: string | undefined;
+          a11yConnector?: string | undefined;
+          barDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          lineDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          scatterDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          pieDescription?: ((params: {
+            value: number | null;
+            totalValue: number;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          radarDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          funnelDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          heatmapDescription?: ((params: {
+            x: number | string | null;
+            y: number | string | null;
+            value: number | null;
+            formattedValue: string;
+            formattedXValue: string;
+            formattedYValue: string;
+          }) => string) | undefined;
+          sankeyNodeDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            nodeLabel: string;
+          }) => string) | undefined;
+          sankeyLinkDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            sourceLabel: string;
+            targetLabel: string;
+          }) => string) | undefined;
+          rangeBarDescription?: ((params: {
+            value: [number, number] | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          ohlcDescription?: ((params: {
+            open: number | null;
+            high: number | null;
+            low: number | null;
+            close: number | null;
+            date: Date | null;
+            formattedDate: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
         };
       };
     };

package/locales/elGR.d.ts

@@ -112,6 +112,82 @@ export declare const elGR: {
           high?: string | undefined;
           low?: string | undefined;
           close?: string | undefined;
+          a11yNoValue?: string | undefined;
+          a11yConnector?: string | undefined;
+          barDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          lineDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          scatterDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          pieDescription?: ((params: {
+            value: number | null;
+            totalValue: number;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          radarDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          funnelDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          heatmapDescription?: ((params: {
+            x: number | string | null;
+            y: number | string | null;
+            value: number | null;
+            formattedValue: string;
+            formattedXValue: string;
+            formattedYValue: string;
+          }) => string) | undefined;
+          sankeyNodeDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            nodeLabel: string;
+          }) => string) | undefined;
+          sankeyLinkDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            sourceLabel: string;
+            targetLabel: string;
+          }) => string) | undefined;
+          rangeBarDescription?: ((params: {
+            value: [number, number] | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          ohlcDescription?: ((params: {
+            open: number | null;
+            high: number | null;
+            low: number | null;
+            close: number | null;
+            date: Date | null;
+            formattedDate: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
         };
       };
     };

package/locales/elGR.js

@@ -121,5 +121,94 @@ const elGRLocaleText = exports.elGRLocaleText = {
   // high: 'High',
   // low: 'Low',
   // close: 'Close',
+
+  // Accessibility descriptions
+  // a11yNoValue: 'no value',
+  // a11yConnector: '; ',
+  // barDescription: function barDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // lineDescription: function lineDescription({
+  //   y,
+  //   formattedXValue,
+  //   formattedYValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedXValue, seriesLabel, y === null ? this.a11yNoValue : formattedYValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // scatterDescription: function scatterDescription({
+  //   formattedXValue,
+  //   formattedYValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, formattedXValue, formattedYValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // pieDescription: function pieDescription({
+  //   value,
+  //   formattedValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // radarDescription: function radarDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // funnelDescription: function funnelDescription({
+  //   value,
+  //   formattedValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // heatmapDescription: function heatmapDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedXValue,
+  //   formattedYValue
+  // }) {
+  //   return [formattedXValue, formattedYValue, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // sankeyNodeDescription: function sankeyNodeDescription({
+  //   formattedValue,
+  //   nodeLabel
+  // }) {
+  //   return [nodeLabel, formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // sankeyLinkDescription: function sankeyLinkDescription({
+  //   formattedValue,
+  //   sourceLabel,
+  //   targetLabel
+  // }) {
+  //   return [sourceLabel && targetLabel ? `${sourceLabel} to ${targetLabel}` : sourceLabel ?? targetLabel, formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // rangeBarDescription: function rangeBarDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // ohlcDescription: function ohlcDescription({
+  //   open,
+  //   high,
+  //   low,
+  //   close,
+  //   formattedDate,
+  //   seriesLabel
+  // }) {
+  //   const hasValues = open !== null && high !== null && low !== null && close !== null;
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  // },
 };
 const elGR = exports.elGR = (0, _getChartsLocalization.getChartsLocalization)(elGRLocaleText);

package/locales/elGR.mjs

@@ -115,5 +115,94 @@ export const elGRLocaleText = {
   // high: 'High',
   // low: 'Low',
   // close: 'Close',
+
+  // Accessibility descriptions
+  // a11yNoValue: 'no value',
+  // a11yConnector: '; ',
+  // barDescription: function barDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // lineDescription: function lineDescription({
+  //   y,
+  //   formattedXValue,
+  //   formattedYValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedXValue, seriesLabel, y === null ? this.a11yNoValue : formattedYValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // scatterDescription: function scatterDescription({
+  //   formattedXValue,
+  //   formattedYValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, formattedXValue, formattedYValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // pieDescription: function pieDescription({
+  //   value,
+  //   formattedValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // radarDescription: function radarDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // funnelDescription: function funnelDescription({
+  //   value,
+  //   formattedValue,
+  //   seriesLabel
+  // }) {
+  //   return [seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // heatmapDescription: function heatmapDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedXValue,
+  //   formattedYValue
+  // }) {
+  //   return [formattedXValue, formattedYValue, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // sankeyNodeDescription: function sankeyNodeDescription({
+  //   formattedValue,
+  //   nodeLabel
+  // }) {
+  //   return [nodeLabel, formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // sankeyLinkDescription: function sankeyLinkDescription({
+  //   formattedValue,
+  //   sourceLabel,
+  //   targetLabel
+  // }) {
+  //   return [sourceLabel && targetLabel ? `${sourceLabel} to ${targetLabel}` : sourceLabel ?? targetLabel, formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // rangeBarDescription: function rangeBarDescription({
+  //   value,
+  //   formattedValue,
+  //   formattedCategoryValue,
+  //   seriesLabel
+  // }) {
+  //   return [formattedCategoryValue, seriesLabel, value === null ? this.a11yNoValue : formattedValue].filter(Boolean).join(this.a11yConnector);
+  // },
+  // ohlcDescription: function ohlcDescription({
+  //   open,
+  //   high,
+  //   low,
+  //   close,
+  //   formattedDate,
+  //   seriesLabel
+  // }) {
+  //   const hasValues = open !== null && high !== null && low !== null && close !== null;
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  // },
 };
 export const elGR = getChartsLocalization(elGRLocaleText);