[charts] Allow tabIndex in surface and legend (#18344)

Author: JCQuintas

packages/x-charts/src/ChartsLegend/ChartsLegend.tsx

@@ -35,6 +35,7 @@ export interface ChartsLegendProps {
   classes?: Partial<ChartsLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 
 const RootElement = styled('ul', {

packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx

@@ -66,6 +66,7 @@ export interface ContinuousColorLegendProps
   classes?: Partial<ContinuousColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 
 const templateAreas = (reverse?: boolean) => {

packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.tsx

@@ -56,6 +56,7 @@ export interface PiecewiseColorLegendProps
   classes?: Partial<PiecewiseColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 
 const RootElement = styled('ul', {

packages/x-charts/src/ChartsSurface/ChartsSurface.tsx

@@ -12,7 +12,11 @@ import {
   selectorChartPropsSize,
 } from '../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors';
 
-export interface ChartsSurfaceProps {
+export interface ChartsSurfaceProps
+  extends Omit<
+    React.SVGProps<SVGSVGElement>,
+    'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'
+  > {
   className?: string;
   title?: string;
   desc?: string;