feat(charts): allow rechart's accessibilityLayer prop (#6459)

[Recharts documentation](https://recharts.org/en-US/storybook) udner the
"Accessibility" section

Closes #6446

Author: Lukas742

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

@@ -246,6 +246,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
         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

@@ -290,6 +290,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((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/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.