Drop React.AriaAttributes from DataAttributes

LukasTy · claude · LukasTy · commit ad974f0fb15a · 2026-04-22T11:53:24.000+03:00
Every real slot inner type in MUI X already inherits React.AriaAttributes
through its element or component base type (HTMLAttributes, SVGAttributes,
ButtonBaseProps, PopperProps, etc.), so including aria-* in the shared
DataAttributes widener was redundant. Narrow the widener to only add the
data-* index signature that React's built-in types don't otherwise expose,
so the helper does exactly what its name says.

- DataAttributes no longer intersects React.AriaAttributes; only the
  `[k: `data-${string}`]` index signature plus user overrides remain.
- AssertAllSlotsAcceptDataAttributes now checks a single marker (`data-x`)
  instead of both data-x and aria-label, and its failure message is
  updated accordingly.
- ChartBaseCommonProps uses React.DOMAttributes (not HTMLAttributes), so
  aria is re-added explicitly there to preserve current behavior.
- Per-package slotDataAttributes.spec.ts comments updated.

Co-Authored-By: Claude Opus 4.7 &lt;noreply@anthropic.com&gt;
diff --git a/packages/x-charts-pro/src/tests/slotDataAttributes.spec.ts b/packages/x-charts-pro/src/tests/slotDataAttributes.spec.ts
@@ -9,7 +9,7 @@ import type { SankeyChartSlotProps } from '@mui/x-charts-pro/SankeyChart';
 import type { ScatterChartProSlotProps } from '@mui/x-charts-pro/ScatterChartPro';
 
 // Compile-time assertion: every slot in every exported SlotProps type of `x-charts-pro`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 
 type AssertBarChartPro = Assert<
   AllTrue<AssertAllSlotsAcceptDataAttributes<BarChartProSlotProps, 'BarChartPro'>>
diff --git a/packages/x-charts/src/models/slots/chartsBaseSlotProps.ts b/packages/x-charts/src/models/slots/chartsBaseSlotProps.ts
@@ -2,6 +2,7 @@ import type * as React from 'react';
 import type { DataAttributes } from '@mui/x-internals/types';
 
 export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> &
+  React.AriaAttributes &
   DataAttributes & {
     className?: string;
     style?: React.CSSProperties;
diff --git a/packages/x-data-grid/src/tests/slotDataAttributes.spec.ts b/packages/x-data-grid/src/tests/slotDataAttributes.spec.ts
@@ -2,7 +2,7 @@ import type { AllTrue, Assert, AssertAllSlotsAcceptDataAttributes } from '@mui/x
 import type { GridSlotsComponentsProps } from '@mui/x-data-grid';
 
 // Compile-time assertion: every slot in the user-facing `slotProps` map of `x-data-grid`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 
 type AssertDataGrid = Assert<
   AllTrue<AssertAllSlotsAcceptDataAttributes<GridSlotsComponentsProps, 'DataGrid'>>
diff --git a/packages/x-date-pickers-pro/src/tests/slotDataAttributes.spec.ts b/packages/x-date-pickers-pro/src/tests/slotDataAttributes.spec.ts
@@ -16,7 +16,7 @@ import type { StaticDateRangePickerSlotProps } from '@mui/x-date-pickers-pro/Sta
 import type { TimeRangePickerSlotProps } from '@mui/x-date-pickers-pro/TimeRangePicker';
 
 // Compile-time assertion: every slot in every exported SlotProps type of `x-date-pickers-pro`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 // A regression on any slot surfaces as a TS error pointing at the offending slot by name.
 
 type AssertDateRangeCalendar = Assert<
diff --git a/packages/x-date-pickers/src/tests/slotDataAttributes.spec.ts b/packages/x-date-pickers/src/tests/slotDataAttributes.spec.ts
@@ -30,7 +30,7 @@ import type { TimePickerSlotProps } from '@mui/x-date-pickers/TimePicker';
 import type { YearCalendarSlotProps } from '@mui/x-date-pickers/YearCalendar';
 
 // Compile-time assertion: every slot in every exported SlotProps type of `x-date-pickers`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 // A regression on any slot surfaces as a TS error pointing at the offending slot by name.
 
 type AssertDateCalendar = Assert<
diff --git a/packages/x-internals/src/types/AssertSlotDataAttributes.spec.ts b/packages/x-internals/src/types/AssertSlotDataAttributes.spec.ts
@@ -5,7 +5,7 @@ import {
   Assert,
 } from './index';
 
-// A typical slot-props interface using the helper — every slot must accept data-*/aria-*.
+// A typical slot-props interface using the helper — every slot must accept data-*.
 interface GoodSlotProps {
   day?: SlotComponentPropsFromProps<{ onClick?: () => void }>;
   calendarHeader?: SlotComponentPropsFromProps<'div'>;
@@ -22,5 +22,5 @@ interface BadSlotProps {
   legacy?: { required: string };
 }
 
-// @ts-expect-error FAIL [Bad.legacy]: slot must accept data-* and aria-* attributes. Use SlotComponentPropsFromProps.
+// @ts-expect-error FAIL [Bad.legacy]: slot must accept data-* attributes. Use SlotComponentPropsFromProps.
 type AssertBadSlotProps = Assert<AllTrue<AssertAllSlotsAcceptDataAttributes<BadSlotProps, 'Bad'>>>;
diff --git a/packages/x-internals/src/types/AssertSlotDataAttributes.ts b/packages/x-internals/src/types/AssertSlotDataAttributes.ts
@@ -1,45 +1,38 @@
 // `V extends any` is the "force-distribution" idiom: it keeps `V` naked in the outer
 // conditional so the check distributes across union variants. That matters for slot
 // types shaped as `T | (T & DataAttributes)` (the `WithDataAttributes` widening) — the
-// assertion passes as soon as one branch exposes both keys, while a non-widened branch
-// failing on its own is fine.
+// assertion passes as soon as one branch exposes the marker key, while a non-widened
+// branch failing on its own is fine.
 //
-// `'data-x'` and `'aria-label'` are used as marker keys. `'data-x'` matches the
+// `'data-x'` is used as the marker key: it matches the
 // ` [k: `data-${string}`]: ... ` template-literal index signature exposed by
-// `DataAttributes`, and `'aria-label'` stands in for the `React.AriaAttributes` shape
-// (whose keys are otherwise all optional, which would make a direct structural check
-// trivially satisfied). Both markers are present only when the variant has been widened via
-// `DataAttributes`.
-type AcceptsDataAndAria<V> = V extends any
-  ? 'data-x' extends keyof V
-    ? 'aria-label' extends keyof V
-      ? true
-      : false
-    : false
-  : never;
+// `DataAttributes`, and is present only when the variant has been widened via
+// `DataAttributes`. `aria-*` is not checked here — every real slot inner type in
+// MUI X inherits `React.AriaAttributes` through its element or component base type,
+// so aria coverage is a structural property of the inner type, not something this
+// widener needs to re-verify.
+type AcceptsDataAttributes<V> = V extends any ? ('data-x' extends keyof V ? true : false) : never;
 
 type CheckVariant<V> = V extends (...args: any[]) => infer R
-  ? AcceptsDataAndAria<R>
-  : AcceptsDataAndAria<V>;
+  ? AcceptsDataAttributes<R>
+  : AcceptsDataAttributes<V>;
 
 type SlotAcceptsDataAttributes<T> = true extends CheckVariant<NonNullable<T>> ? true : false;
 
 /**
  * Maps each slot of a `*SlotProps` type to either `true` or a failure message
- * identifying the slot that does not accept `data-*` / `aria-*` attributes.
+ * identifying the slot that does not accept `data-*` attributes.
  *
- * The check probes each slot's value type for both the
+ * The check probes each slot's value type for the
  * `` [key: `data-${string}`]: ... `` index signature (covering arbitrary
- * `data-*` keys) and `'aria-label'` as the marker aria attribute (standing in
- * for the full `React.AriaAttributes` surface). The check distributes across
- * union variants and unwraps function variants to their return type; any
- * variant providing both signatures — typically via an intersection with
- * `DataAttributes` — passes.
+ * `data-*` keys). The check distributes across union variants and unwraps
+ * function variants to their return type; any variant providing the signature
+ * — typically via an intersection with `DataAttributes` — passes.
  */
 export type AssertAllSlotsAcceptDataAttributes<T, Name extends string = 'Component'> = {
   [K in keyof T]-?: SlotAcceptsDataAttributes<T[K]> extends true
     ? true
-    : `FAIL [${Name}.${Extract<K, string>}]: slot must accept data-* and aria-* attributes. Use SlotComponentPropsFromProps.`;
+    : `FAIL [${Name}.${Extract<K, string>}]: slot must accept data-* attributes. Use SlotComponentPropsFromProps.`;
 };
 
 /**
diff --git a/packages/x-internals/src/types/DataAttributes.ts b/packages/x-internals/src/types/DataAttributes.ts
@@ -1,5 +1,3 @@
-import type * as React from 'react';
-
 type DataAttributeValue = string | number | boolean | undefined;
 
 /**
@@ -16,22 +14,27 @@ type DataAttributeValue = string | number | boolean | undefined;
 export interface DataAttributesOverrides {}
 
 /**
- * Union of all `data-*` and `aria-*` attributes accepted on slot props.
- * `aria-*` keys reuse React's typed `AriaAttributes` so standard keys keep
- * their value constraints (e.g. `aria-expanded: boolean | 'true' | 'false'`).
+ * Index signature for arbitrary `data-*` attributes, merged with any
+ * strongly-typed overrides declared via `DataAttributesOverrides`.
+ *
+ * `aria-*` keys are intentionally not included here: every slot inner type
+ * used in MUI X already inherits `React.AriaAttributes` through its element
+ * or component base type (`HTMLAttributes`, `SVGAttributes`, `ButtonBaseProps`,
+ * etc.), so widening with them would be redundant. `data-*` is the only thing
+ * the host React types don't expose as a typed key, so it's the only thing
+ * this helper adds.
  */
-export type DataAttributes = React.AriaAttributes &
-  DataAttributesOverrides & {
-    [k: `data-${string}`]: DataAttributeValue;
-  };
+export type DataAttributes = DataAttributesOverrides & {
+  [k: `data-${string}`]: DataAttributeValue;
+};
 
 /**
- * Widens a slot-props type to also accept `data-*` and `aria-*` attributes.
+ * Widens a slot-props type to also accept arbitrary `data-*` attributes.
  *
  * Implemented as a union between the original type and the intersected widened
  * form — `T | (T & DataAttributes)` — so that pre-typed values remain
  * assignable to the original branch without having to declare a `data-*`
  * index signature themselves, while object literals can pick up the widened
- * branch and include `data-*` / `aria-*` keys.
+ * branch and include `data-*` keys.
  */
 export type WithDataAttributes<T> = T | (T & DataAttributes);
diff --git a/packages/x-tree-view-pro/src/tests/slotDataAttributes.spec.ts b/packages/x-tree-view-pro/src/tests/slotDataAttributes.spec.ts
@@ -2,7 +2,7 @@ import type { AllTrue, Assert, AssertAllSlotsAcceptDataAttributes } from '@mui/x
 import type { RichTreeViewProSlotProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
 // Compile-time assertion: every slot in every exported SlotProps type of `x-tree-view-pro`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 
 type AssertRichTreeViewPro = Assert<
   AllTrue<
diff --git a/packages/x-tree-view/src/tests/slotDataAttributes.spec.ts b/packages/x-tree-view/src/tests/slotDataAttributes.spec.ts
@@ -5,7 +5,7 @@ import type { TreeItemSlotProps } from '@mui/x-tree-view/TreeItem';
 import type { TreeItemIconSlotProps } from '@mui/x-tree-view/TreeItemIcon';
 
 // Compile-time assertion: every slot in every exported SlotProps type of `x-tree-view`
-// must accept `data-*` and `aria-*` attributes. The test compiles iff the assertion holds.
+// must accept `data-*` attributes. The test compiles if and only if the assertion holds.
 
 type AssertRichTreeView = Assert<
   AllTrue<AssertAllSlotsAcceptDataAttributes<RichTreeViewSlotProps<{}, false>, 'RichTreeView'>>
