[fields] Remove enableAccessibleFieldDOMStructure behavior

AGENTS.md

@@ -137,6 +137,9 @@ To generate `.js` files, run `pnpm docs:typescript:formatted`.
 
 Codemods are run by consumers of the MUI X libraries to migrate to newer versions of the libraries.
 
+When adding a new codemod, make sure to also document it in the `packages/x-codemod/README.md` following existing examples.
+You also need to create or expand the `preset-safe` preset to include the new codemod, document the preset in the `README.md` and also include the newly added changes to the `preset-safe` test.
+
 ### Versioning
 
 When creating codemods, the code should be created in the directory of the target version. E.g., a codemod to migrate from v8 to v9 should be placed inside the `v9.0.0` directory.

docs/data/date-pickers/custom-field/BrowserV7Field.js → docs/data/date-pickers/custom-field/BrowserField.js

@@ -42,8 +42,6 @@ function BrowserDateField(props) {
   const fieldResponse = useDateField(props);
 
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -118,7 +116,7 @@ function BrowserDatePicker(props) {
   );
 }
 
-export default function BrowserV7Field() {
+export default function BrowserField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDatePicker

docs/data/date-pickers/custom-field/BrowserV7Field.tsx → docs/data/date-pickers/custom-field/BrowserField.tsx

@@ -43,12 +43,9 @@ const BrowserIconButton = styled('button', {
 });
 
 function BrowserDateField(props: DatePickerFieldProps) {
-  const fieldResponse = useDateField<true, typeof props>(props);
+  const fieldResponse = useDateField<typeof props>(props);
 
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
-
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -128,7 +125,7 @@ function BrowserDatePicker(props: DatePickerProps) {
   );
 }
 
-export default function BrowserV7Field() {
+export default function BrowserField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDatePicker

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js → docs/data/date-pickers/custom-field/BrowserMultiInputRangeField.js

@@ -27,8 +27,6 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
 
 function BrowserTextField(props) {
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -127,7 +125,7 @@ function BrowserDateRangePicker(props) {
   );
 }
 
-export default function BrowserV7MultiInputRangeField() {
+export default function BrowserMultiInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDateRangePicker />

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx → docs/data/date-pickers/custom-field/BrowserMultiInputRangeField.tsx

@@ -37,17 +37,13 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
 );
 
 interface BrowserTextFieldProps extends UseMultiInputRangeFieldTextFieldProps<
-  true,
   React.HTMLAttributes<HTMLDivElement>
 > {
   triggerRef?: React.Ref<HTMLDivElement>;
 }
 
 function BrowserTextField(props: BrowserTextFieldProps) {
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
-
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -161,7 +157,7 @@ function BrowserDateRangePicker(props: DateRangePickerProps) {
   );
 }
 
-export default function BrowserV7MultiInputRangeField() {
+export default function BrowserMultiInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDateRangePicker />

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js → docs/data/date-pickers/custom-field/BrowserSingleInputRangeField.js

@@ -42,8 +42,6 @@ function BrowserSingleInputDateRangeField(props) {
   const fieldResponse = useSingleInputDateRangeField(props);
 
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -129,7 +127,7 @@ function BrowserSingleInputDateRangePicker(props) {
   );
 }
 
-export default function BrowserV7SingleInputRangeField() {
+export default function BrowserSingleInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserSingleInputDateRangePicker

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx → docs/data/date-pickers/custom-field/BrowserSingleInputRangeField.tsx

@@ -47,12 +47,9 @@ interface BrowserSingleInputDateRangeFieldProps extends DateRangePickerFieldProp
 function BrowserSingleInputDateRangeField(
   props: BrowserSingleInputDateRangeFieldProps,
 ) {
-  const fieldResponse = useSingleInputDateRangeField<true, typeof props>(props);
+  const fieldResponse = useSingleInputDateRangeField<typeof props>(props);
 
   const {
-    // Should be ignored
-    enableAccessibleFieldDOMStructure,
-
     // Should be passed to the PickersSectionList component
     elements,
     sectionListRef,
@@ -143,7 +140,7 @@ function BrowserSingleInputDateRangePicker(props: DateRangePickerProps) {
   );
 }
 
-export default function BrowserV7SingleInputRangeField() {
+export default function BrowserSingleInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserSingleInputDateRangePicker

docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js → docs/data/date-pickers/custom-field/MaterialFieldWrapped.js

@@ -10,7 +10,7 @@ const MyPickersTextField = React.forwardRef((props, ref) => (
   <PickersTextField {...props} ref={ref} size="small" />
 ));
 
-export default function MaterialV7FieldWrapped() {
+export default function MaterialFieldWrapped() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DatePicker']}>

docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx → docs/data/date-pickers/custom-field/MaterialFieldWrapped.tsx

@@ -15,7 +15,7 @@ const MyPickersTextField = React.forwardRef(
   ),
 );
 
-export default function MaterialV7FieldWrapped() {
+export default function MaterialFieldWrapped() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DatePicker']}>

docs/data/date-pickers/custom-field/MultiInputDateRangePickerWrapped.tsx

@@ -7,9 +7,7 @@ import {
 } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 
-function WrappedMultiInputDateRangeField(
-  props: MultiInputDateRangeFieldProps<true>,
-) {
+function WrappedMultiInputDateRangeField(props: MultiInputDateRangeFieldProps) {
   return <MultiInputDateRangeField spacing={4} {...props} />;
 }
 

docs/data/date-pickers/custom-field/custom-field.md

@@ -70,25 +70,14 @@ When used inside a picker, the `separator` slot is not available directly and mu
 
 You can import the `PickersTextField` component to create custom wrappers:
 
-{{"demo": "MaterialV7FieldWrapped.js"}}
+{{"demo": "MaterialFieldWrapped.js"}}
 
 :::success
 This approach is only recommended if you need complex customizations on your `PickersTextField`.
 
 If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield).
 :::
 
-### Using Material `TextField`
-
-Pass the `enableAccessibleFieldDOMStructure={false}` to any Field or Picker component to use an `<input />` for the editing instead of the new accessible DOM structure:
-
-{{"demo": "MaterialV6Field.js"}}
-
-:::warning
-The non-accessible DOM structure will be deprecated in a follow-up minor version and removed in `v9.x`.
-If you are unable to migrate for some reason, please open an issue to describe what is missing from the new DOM structure so that we can improve it before dropping the old one.
-:::
-
 ## With another Design System
 
 ### Using a custom input
@@ -100,11 +89,11 @@ You will have access to the `clearable` and `onClear` props using native HTML el
 but the **focus** and **hover** behavior depends on styles applied via the `sx` prop.
 :::
 
-{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}}
+{{"demo": "BrowserField.js", "defaultCodeOpen": false}}
 
-{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}}
+{{"demo": "BrowserSingleInputRangeField.js", "defaultCodeOpen": false}}
 
-{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}}
+{{"demo": "BrowserMultiInputRangeField.js", "defaultCodeOpen": false}}
 
 ## With a custom editing experience
 

docs/data/date-pickers/fields/ImperativeClear.tsx

@@ -19,7 +19,7 @@ export default function ImperativeClear() {
   const endFieldRef = React.useRef<FieldRef<PickerValue>>(null);
 
   const CustomMultiInputDateRangeField = React.useCallback(
-    (props: MultiInputDateRangeFieldProps<true>) => (
+    (props: MultiInputDateRangeFieldProps) => (
       <MultiInputDateRangeField
         {...props}
         startFieldRef={startFieldRef}

docs/data/migration/migration-pickers-v6/migration-pickers-v6.md

@@ -437,6 +437,10 @@ then you can look at the page to see all the examples improved and updated to us
 
 #### Do not forward the `enableAccessibleFieldDOMStructure` prop to the DOM
 
+:::info
+The `enableAccessibleFieldDOMStructure` prop has been removed in v9. The accessible DOM structure is now the only supported option.
+:::
+
 The headless field hooks (for example `useDateField`) now return a new prop called `enableAccessibleFieldDOMStructure`.
 This is used to know if the current UI expected is built using the accessible DOM structure or not.
 

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

@@ -179,6 +179,10 @@ Starting with version `v8.x`, the new DOM structure is the default for all field
 
 #### Fallback to the non-accessible DOM structure
 
+:::info
+The `enableAccessibleFieldDOMStructure` prop has been removed in v9. The accessible DOM structure is now the only supported option.
+:::
+
 ```tsx
 <DateField enableAccessibleFieldDOMStructure={false} />
 <DatePicker enableAccessibleFieldDOMStructure={false} />