Remove enableAccessibleFieldDOMStructure prop when not needed

mui · Sep 17, 2024 · bce7e95 · bce7e95
1 parent 7b1784d
commit bce7e95
Show file tree

Hide file tree

Showing 47 changed files with 82 additions and 284 deletions.
diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js
@@ -14,14 +14,8 @@ export default function MaterialV7FieldWrapped() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DatePicker']}>
-        <DateField
-          enableAccessibleFieldDOMStructure
-          slots={{ textField: MyPickersTextField }}
-        />
-        <DatePicker
-          enableAccessibleFieldDOMStructure
-          slots={{ textField: MyPickersTextField }}
-        />
+        <DateField slots={{ textField: MyPickersTextField }} />
+        <DatePicker slots={{ textField: MyPickersTextField }} />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx
@@ -19,14 +19,8 @@ export default function MaterialV7FieldWrapped() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DatePicker']}>
-        <DateField
-          enableAccessibleFieldDOMStructure
-          slots={{ textField: MyPickersTextField }}
-        />
-        <DatePicker
-          enableAccessibleFieldDOMStructure
-          slots={{ textField: MyPickersTextField }}
-        />
+        <DateField slots={{ textField: MyPickersTextField }} />
+        <DatePicker slots={{ textField: MyPickersTextField }} />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview
@@ -1,8 +1,2 @@
-<DateField
-  enableAccessibleFieldDOMStructure
-  slots={{ textField: MyPickersTextField }}
-/>
-<DatePicker
-  enableAccessibleFieldDOMStructure
-  slots={{ textField: MyPickersTextField }}
-/>
+<DateField slots={{ textField: MyPickersTextField }} />
+<DatePicker slots={{ textField: MyPickersTextField }} />
diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.js b/docs/data/date-pickers/fields/BasicV7DOMStructure.js
@@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField']}>
-        <DateField label="Date Field" enableAccessibleFieldDOMStructure />
+        <DateField label="Date Field" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx
@@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField']}>
-        <DateField label="Date Field" enableAccessibleFieldDOMStructure />
+        <DateField label="Date Field" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview
@@ -1 +1 @@
-<DateField label="Date Field" enableAccessibleFieldDOMStructure />
+<DateField label="Date Field"/>
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -91,8 +91,8 @@ the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards th
   ```js
   <DatePicker
     slotProps={{ field: { shouldRespectLeadingZeros: true } }}
-    enableAccessibleFieldDOMStructure
-  />
+    enableAccessibleFieldDOMStructure={false}
+   />
   <DatePicker
     slotProps={{ field: { shouldRespectLeadingZeros: true } }}
   />
@@ -106,8 +106,8 @@ the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards th
   ```js
   <DatePicker
     slotProps={{ field: { size: 'small' } }}
-    enableAccessibleFieldDOMStructure
-  />
+    enableAccessibleFieldDOMStructure={false}
+   />
   <DatePicker
     slotProps={{ field: { size: 'small' } }}
   />
@@ -123,7 +123,7 @@ Both components below will render a small size UI:
 ```js
 <DatePicker
   slotProps={{ textField: { size: 'small' } }}
-  enableAccessibleFieldDOMStructure
+  enableAccessibleFieldDOMStructure={false}
 />
 <DatePicker
   slotProps={{ textField: { size: 'small' } }}

diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
@@ -487,7 +487,6 @@ export default function Keyboard() {
               onKeyUp={() => {
                 setSelectedKey(null);
               }}
-              enableAccessibleFieldDOMStructure
               onSelectedSectionsChange={(newSelectedSection) => {
                 selectedSection.current = newSelectedSection;
               }}

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
@@ -45,7 +45,7 @@ describe('<DateRangePicker />', () => {
     const originalMatchMedia = window.matchMedia;
     window.matchMedia = stubMatchMedia(false);
 
-    render(<DateRangePicker enableAccessibleFieldDOMStructure />);
+    render(<DateRangePicker />);
     fireEvent.click(getFieldInputRoot());
     clock.runToLast();
 

diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
@@ -30,7 +30,6 @@ describe('<DesktopDateRangePicker />', () => {
   it('should scroll current month to the active selection when focusing appropriate field', () => {
     render(
       <DesktopDateRangePicker
-        enableAccessibleFieldDOMStructure
         reduceAnimations
         defaultValue={[adapterToUse.date('2019-05-19'), adapterToUse.date('2019-10-30')]}
       />,
@@ -49,10 +48,7 @@ describe('<DesktopDateRangePicker />', () => {
 
   it(`should not crash when opening picker with invalid date value`, () => {
     render(
-      <DesktopDateRangePicker
-        enableAccessibleFieldDOMStructure
-        defaultValue={[new Date(NaN), adapterToUse.date('2019-01-31')]}
-      />,
+      <DesktopDateRangePicker defaultValue={[new Date(NaN), adapterToUse.date('2019-01-31')]} />,
     );
 
     openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
@@ -74,7 +70,6 @@ describe('<DesktopDateRangePicker />', () => {
       <ThemeProvider theme={theme}>
         <LocalizationProvider dateAdapter={AdapterClassToUse}>
           <DesktopDateRangePicker
-            enableAccessibleFieldDOMStructure
             // We set the variant to standard to avoid having the label rendered in two places.
             slotProps={{
               textField: {
@@ -94,10 +89,7 @@ describe('<DesktopDateRangePicker />', () => {
     it('should add focused class to the field when it is focused', () => {
       // test v7 behavior
       const { unmount } = render(
-        <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
-          slots={{ field: SingleInputDateRangeField }}
-        />,
+        <DesktopDateRangePicker slots={{ field: SingleInputDateRangeField }} />,
       );
 
       const sectionsContainer = getFieldSectionsContainer();
@@ -119,11 +111,7 @@ describe('<DesktopDateRangePicker />', () => {
     it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => {
       // Test with v7 input
       const { unmount } = render(
-        <DesktopDateRangePicker
-          name="test"
-          enableAccessibleFieldDOMStructure
-          slots={{ field: SingleInputDateRangeField }}
-        />,
+        <DesktopDateRangePicker name="test" slots={{ field: SingleInputDateRangeField }} />,
       );
       expect(screen.getByRole<HTMLInputElement>('textbox', { hidden: true }).name).to.equal('test');
 
@@ -141,7 +129,6 @@ describe('<DesktopDateRangePicker />', () => {
       const handleTouchStart = spy();
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           open
           slotProps={{
             popper: {
@@ -167,7 +154,7 @@ describe('<DesktopDateRangePicker />', () => {
     it('should open when clicking the start input', () => {
       const onOpen = spy();
 
-      render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
+      render(<DesktopDateRangePicker onOpen={onOpen} />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
@@ -178,7 +165,7 @@ describe('<DesktopDateRangePicker />', () => {
     it('should open when clicking the end input', () => {
       const onOpen = spy();
 
-      render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
+      render(<DesktopDateRangePicker onOpen={onOpen} />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' });
 
@@ -190,7 +177,7 @@ describe('<DesktopDateRangePicker />', () => {
       it(`should open when pressing "${key}" in the start input`, () => {
         const onOpen = spy();
 
-        render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
+        render(<DesktopDateRangePicker onOpen={onOpen} />);
 
         const startInput = getFieldSectionsContainer();
         act(() => startInput.focus());
@@ -206,7 +193,7 @@ describe('<DesktopDateRangePicker />', () => {
       it(`should open when pressing "${key}" in the end input`, () => {
         const onOpen = spy();
 
-        render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
+        render(<DesktopDateRangePicker onOpen={onOpen} />);
 
         const endInput = getFieldSectionsContainer(1);
         act(() => endInput.focus());
@@ -229,7 +216,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -272,7 +258,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -307,7 +292,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onAccept={onAccept}
           onClose={onClose}
           defaultValue={defaultValue}
@@ -335,7 +319,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -365,12 +348,7 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <div>
-          <DesktopDateRangePicker
-            enableAccessibleFieldDOMStructure
-            onChange={onChange}
-            onAccept={onAccept}
-            onClose={onClose}
-          />
+          <DesktopDateRangePicker onChange={onChange} onAccept={onAccept} onClose={onClose} />
           <input id="test-id" />
         </div>,
       );
@@ -404,7 +382,6 @@ describe('<DesktopDateRangePicker />', () => {
       render(
         <div>
           <DesktopDateRangePicker
-            enableAccessibleFieldDOMStructure
             onChange={onChange}
             onAccept={onAccept}
             onClose={onClose}
@@ -443,14 +420,7 @@ describe('<DesktopDateRangePicker />', () => {
       const onAccept = spy();
       const onClose = spy();
 
-      render(
-        <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
-          onChange={onChange}
-          onAccept={onAccept}
-          onClose={onClose}
-        />,
-      );
+      render(<DesktopDateRangePicker onChange={onChange} onAccept={onAccept} onClose={onClose} />);
 
       // Dismiss the picker
       fireEvent.click(document.body);
@@ -471,12 +441,7 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <React.Fragment>
-          <DesktopDateRangePicker
-            enableAccessibleFieldDOMStructure
-            onChange={onChange}
-            onAccept={onAccept}
-            onClose={onClose}
-          />
+          <DesktopDateRangePicker onChange={onChange} onAccept={onAccept} onClose={onClose} />
           <button type="button" id="test">
             {' '}
             focus me
@@ -507,7 +472,6 @@ describe('<DesktopDateRangePicker />', () => {
       render(
         <div>
           <DesktopDateRangePicker
-            enableAccessibleFieldDOMStructure
             defaultValue={defaultValue}
             onChange={onChange}
             onAccept={onAccept}
@@ -547,7 +511,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -574,7 +537,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -602,7 +564,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -627,7 +588,6 @@ describe('<DesktopDateRangePicker />', () => {
 
       render(
         <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
           onChange={onChange}
           onAccept={onAccept}
           onClose={onClose}
@@ -648,7 +608,7 @@ describe('<DesktopDateRangePicker />', () => {
 
   describe('disabled dates', () => {
     it('should respect the disablePast prop', () => {
-      render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure disablePast />);
+      render(<DesktopDateRangePicker disablePast />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
@@ -660,7 +620,7 @@ describe('<DesktopDateRangePicker />', () => {
     });
 
     it('should respect the disableFuture prop', () => {
-      render(<DesktopDateRangePicker enableAccessibleFieldDOMStructure disableFuture />);
+      render(<DesktopDateRangePicker disableFuture />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
@@ -672,12 +632,7 @@ describe('<DesktopDateRangePicker />', () => {
     });
 
     it('should respect the minDate prop', () => {
-      render(
-        <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
-          minDate={adapterToUse.date('2018-01-15')}
-        />,
-      );
+      render(<DesktopDateRangePicker minDate={adapterToUse.date('2018-01-15')} />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
@@ -689,12 +644,7 @@ describe('<DesktopDateRangePicker />', () => {
     });
 
     it('should respect the maxDate prop', () => {
-      render(
-        <DesktopDateRangePicker
-          enableAccessibleFieldDOMStructure
-          maxDate={adapterToUse.date('2018-01-15')}
-        />,
-      );
+      render(<DesktopDateRangePicker maxDate={adapterToUse.date('2018-01-15')} />);
 
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 

diff --git a/...te-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/...te-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
@@ -29,7 +29,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
     views: ['day'],
   }));
 
-  describeConformance(<DesktopDateRangePicker enableAccessibleFieldDOMStructure />, () => ({
+  describeConformance(<DesktopDateRangePicker />, () => ({
     classes: {} as any,
     render,
     muiName: 'MuiDesktopDateRangePicker',