feat(charts): allow rechart's accessibilityLayer prop

packages/charts/src/components/BarChart/BarChart.tsx

@@ -76,7 +76,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -186,7 +186,7 @@
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const labelFormatter = useLabelFormatter(primaryDimension);
@@ -246,6 +246,7 @@
         layout="vertical"
         data={dataset}
         barGap={chartConfig.barGap}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={
           typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
         }

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -66,7 +66,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -146,7 +146,7 @@
     ...rest
   } = props;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const chartConfig: BulletChartProps['chartConfig'] = {
     yAxisVisible: false,
@@ -225,7 +225,7 @@
           );
         } else {
           onDataPointClick(
             enrichEventWithDetails({} as any, {
               value: eventOrIndex.value,
               dataKey: eventOrIndex.dataKey,
               dataIndex: eventOrIndex.index,
@@ -290,6 +290,7 @@
         margin={marginChart}
         data={dataset}
         layout={layout}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={
           typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
         }
@@ -302,7 +303,7 @@
         {chartConfig.xAxisVisible &&
           dimensions.map((dimension, index) => {
             let AxisComponent;
             const axisProps: any = {
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStartEnd' : 0),
               tickLine: index < 1,
@@ -442,7 +443,7 @@
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: !noAnimation
           };
           let labelPosition = 'top';

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -244,6 +244,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
         margin={marginChart}
         data={dataset}
         barGap={chartConfig.barGap}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={
           typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
         }

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -196,7 +196,8 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
             yAxisTicksVisible: false,
             gridHorizontal: false,
             yAxisLabelsVisible: false,
-            yAxisWidth
+            yAxisWidth,
+            accessibilityLayer: chartConfig.accessibilityLayer
           }}
         />
       )}

packages/charts/src/components/ComposedChart/index.tsx

@@ -295,6 +295,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
         margin={marginChart}
         data={dataset}
         layout={layout}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={
           typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
         }

packages/charts/src/components/LineChart/LineChart.tsx

@@ -231,6 +231,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
         margin={marginChart}
         data={dataset}
         onClick={onDataPointClickInternal}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
       >
         <CartesianGrid

packages/charts/src/components/PieChart/PieChart.tsx

@@ -281,6 +281,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       <PieChartLib
         onClick={onClickInternal}
         margin={chartConfig.margin}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={clsx(
           typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined,
           classNames.piechart

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -181,6 +181,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
         onClick={onClickInternal}
         data={dataset}
         margin={chartConfig.margin}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
       >
         <PolarGrid gridType={chartConfig.polarGridType} />

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -231,6 +231,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
       <ScatterChartLib
         onClick={onClickInternal}
         margin={marginChart}
+        accessibilityLayer={chartConfig.accessibilityLayer}
         className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
       >
         <CartesianGrid

packages/charts/src/interfaces/IChartBaseProps.ts

@@ -68,6 +68,7 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
    * - `legendPosition`: Vertical position of the legend. Can be one of the following: `"top"`,`"middle"`, `"bottom"` (`"middle"` is not supported for: ColumnChartWithTrend, DonutChart, PieChart)
    * - `legendHorizontalAlign`: Alignment of the legend. Can be one of the following: `"left"`, `"center"`, `"right"`
    * - `resizeDebounce`: Number that sets the amount of delay time the chart waits when resizing.
+   * - `accessibilityLayer`: Experimental property to improve accessibility. Not supported by all charts and configurations!
    *
    * Please note that depending on the chart type, the `chartConfig` prop may accept more properties.
    */
@@ -93,6 +94,17 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
      * Number that sets the amount of delay time the chart waits when resizing.
      */
     resizeDebounce?: number;
+    /**
+     * __Experimental!__
+     *
+     * Apply an accessibility layer on the chart, i.a. allowing users to focus and navigate the chart via the arrow keys.
+     *
+     * __Note:__ Currently, this feature only supports categorical and horizontal charts with tooltips!
+     * For more details, please refer to the [Recharts documentation](https://recharts.org/en-US/storybook) under the "Accessibility" section.
+     *
+     * @experimental
+     */
+    accessibilityLayer?: boolean;
   };
   /**
    * Defines the configuration object for the internally used `recharts` Tooltip popover that is displayed when hovering over data points.