From 7a07521b7562e3b22244057f100b69b307187398 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:30:26 +0100
Subject: [PATCH] [DataGridPremium] Remove the ariaV8 experimental flag
 (#15694)

---
 .../row-grouping/RowGroupingAriaV8.js         | 32 -------------
 .../row-grouping/RowGroupingAriaV8.tsx        | 32 -------------
 .../RowGroupingAriaV8.tsx.preview             |  6 ---
 .../row-grouping/RowGroupingFullExample.js    |  1 -
 .../row-grouping/RowGroupingFullExample.tsx   |  1 -
 .../RowGroupingFullExample.tsx.preview        |  1 -
 .../data-grid/row-grouping/row-grouping.md    | 16 -------
 .../migration-data-grid-v7.md                 | 16 +++----
 .../x/api/data-grid/data-grid-premium.json    |  5 +-
 packages/x-codemod/README.md                  | 30 ++++++++++++
 .../actual.spec.js                            | 23 +++++++++
 .../expected.spec.js                          | 18 +++++++
 .../index.ts                                  | 22 +++++++++
 ...ve-stabilized-experimentalFeatures.test.ts | 48 +++++++++++++++++++
 .../ts-actual.spec.tsx                        | 25 ++++++++++
 .../ts-expected.spec.tsx                      | 20 ++++++++
 .../src/DataGridPremium/DataGridPremium.tsx   |  1 -
 .../src/hooks/utils/useGridAriaAttributes.tsx |  7 +--
 .../src/models/dataGridPremiumProps.ts        |  9 +---
 19 files changed, 197 insertions(+), 116 deletions(-)
 delete mode 100644 docs/data/data-grid/row-grouping/RowGroupingAriaV8.js
 delete mode 100644 docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx
 delete mode 100644 docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx.preview
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-actual.spec.tsx
 create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-expected.spec.tsx

diff --git a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.js b/docs/data/data-grid/row-grouping/RowGroupingAriaV8.js
deleted file mode 100644
index 6689443db0822..0000000000000
--- a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import {
-  DataGridPremium,
-  useGridApiRef,
-  useKeepGroupedColumnsHidden,
-} from '@mui/x-data-grid-premium';
-import { useMovieData } from '@mui/x-data-grid-generator';
-
-export default function RowGroupingAriaV8() {
-  const data = useMovieData();
-  const apiRef = useGridApiRef();
-
-  const initialState = useKeepGroupedColumnsHidden({
-    apiRef,
-    initialState: {
-      rowGrouping: {
-        model: ['company'],
-      },
-    },
-  });
-
-  return (
-    <div style={{ height: 400, width: '100%' }}>
-      <DataGridPremium
-        {...data}
-        apiRef={apiRef}
-        initialState={initialState}
-        experimentalFeatures={{ ariaV8: true }}
-      />
-    </div>
-  );
-}
diff --git a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx b/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx
deleted file mode 100644
index 6689443db0822..0000000000000
--- a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import {
-  DataGridPremium,
-  useGridApiRef,
-  useKeepGroupedColumnsHidden,
-} from '@mui/x-data-grid-premium';
-import { useMovieData } from '@mui/x-data-grid-generator';
-
-export default function RowGroupingAriaV8() {
-  const data = useMovieData();
-  const apiRef = useGridApiRef();
-
-  const initialState = useKeepGroupedColumnsHidden({
-    apiRef,
-    initialState: {
-      rowGrouping: {
-        model: ['company'],
-      },
-    },
-  });
-
-  return (
-    <div style={{ height: 400, width: '100%' }}>
-      <DataGridPremium
-        {...data}
-        apiRef={apiRef}
-        initialState={initialState}
-        experimentalFeatures={{ ariaV8: true }}
-      />
-    </div>
-  );
-}
diff --git a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx.preview b/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx.preview
deleted file mode 100644
index 303e3b3ef2367..0000000000000
--- a/docs/data/data-grid/row-grouping/RowGroupingAriaV8.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-<DataGridPremium
-  {...data}
-  apiRef={apiRef}
-  initialState={initialState}
-  experimentalFeatures={{ ariaV8: true }}
-/>
\ No newline at end of file
diff --git a/docs/data/data-grid/row-grouping/RowGroupingFullExample.js b/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
index 52040b1639af1..4deda985cbd8b 100644
--- a/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
+++ b/docs/data/data-grid/row-grouping/RowGroupingFullExample.js
@@ -40,7 +40,6 @@ export default function RowGroupingFullExample() {
         groupingColDef={{
           leafField: 'traderEmail',
         }}
-        experimentalFeatures={{ ariaV8: true }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
index 52040b1639af1..4deda985cbd8b 100644
--- a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
+++ b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx
@@ -40,7 +40,6 @@ export default function RowGroupingFullExample() {
         groupingColDef={{
           leafField: 'traderEmail',
         }}
-        experimentalFeatures={{ ariaV8: true }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx.preview b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx.preview
index 35a7dd3ccbcd0..b20dbc70dc3ad 100644
--- a/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx.preview
+++ b/docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx.preview
@@ -7,5 +7,4 @@
   groupingColDef={{
     leafField: 'traderEmail',
   }}
-  experimentalFeatures={{ ariaV8: true }}
 />
\ No newline at end of file
diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md
index cb24c6d9b785f..846c08b234395 100644
--- a/docs/data/data-grid/row-grouping/row-grouping.md
+++ b/docs/data/data-grid/row-grouping/row-grouping.md
@@ -396,22 +396,6 @@ Don't hesitate to leave a comment on the same issue to influence what gets built
 
 With this panel, your users will be able to control which columns are used for grouping just by dragging them inside the panel.
 
-## Accessibility changes in v8
-
-The Data Grid v8 with row grouping feature will improve the accessibility and will be more aligned with the WAI-ARIA authoring practices.
-
-You can start using the new accessibility features by enabling `ariaV8` experimental feature flag:
-
-```tsx
-<DataGridPremium experimentalFeatures={{ ariaV8: true }} />
-```
-
-:::warning
-The value of `ariaV8` should be constant and not change during the lifetime of the Data Grid.
-:::
-
-{{"demo": "RowGroupingAriaV8.js", "bg": "inline", "defaultCodeOpen": false}}
-
 ## Full example
 
 {{"demo": "RowGroupingFullExample.js", "bg": "inline", "defaultCodeOpen": false}}
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index aa9969d472db8..5827d8c96f20b 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -39,25 +39,25 @@ Below are described the steps you need to make to migrate from v7 to v8.
   To revert to the previous behavior, pass `rowSelectionPropagation={{ parents: false, descendants: false }}`.
 - The prop `indeterminateCheckboxAction` has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
 
-### Localization
-
-- If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination).
-
 ### Changes to the public API
 
 - The `apiRef.current.resize()` method was removed.
 - The `<GridOverlays />` component is not exported anymore.
 
-<!-- ### Accessibility
+### Localization
 
-TBD
+- If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination).
 
-### Editing
+### Accessibility
 
-TBD
+- The Grid is more aligned with the WAI-ARIA authoring practices and sets the `role` attribute to `treegrid` if the Data Grid is used with row grouping feature.
 
 ### Other exports
 
+- `ariaV8` experimental flag is removed.
+
+<!-- ### Editing
+
 TBD
 
 ### CSS classes and styling
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 76fa5fa203ca3..5663a6235bb17 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -81,10 +81,7 @@
     },
     "estimatedRowCount": { "type": { "name": "number" } },
     "experimentalFeatures": {
-      "type": {
-        "name": "shape",
-        "description": "{ ariaV8?: bool, warnIfFocusStateIsNotSynced?: bool }"
-      }
+      "type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" }
     },
     "filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
     "filterMode": {
diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
index 2044b38e332eb..a5b6bd29fcaab 100644
--- a/packages/x-codemod/README.md
+++ b/packages/x-codemod/README.md
@@ -193,6 +193,36 @@ Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle`
   />
 ```
 
+### Data Grid codemods
+
+#### `preset-safe` for Data Grid v8.0.0
+
+The `preset-safe` codemods for Data Grid.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/data-grid/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`remove-stabilized-v8-experimentalFeatures`](#remove-stabilized-v8-experimentalFeatures)
+
+#### `remove-stabilized-v8-experimentalFeatures`
+
+Remove feature flags for stabilized `experimentalFeatures`.
+
+```diff
+ <DataGridPremium
+-  experimentalFeatures={{
+-    ariaV8: true,
+-  }}
+ />
+```
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+```
+
 ## v7.0.0
 
 ### 🚀 `preset-safe` for v7.0.0
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js
new file mode 100644
index 0000000000000..4949e5a16c073
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+function App() {
+  return (
+    <React.Fragment>
+      <DataGridPremium
+        experimentalFeatures={{
+          warnIfFocusStateIsNotSynced: true,
+          ariaV8: true,
+        }}
+      />
+      <DataGridPremium
+        experimentalFeatures={{
+          ariaV8: true,
+        }}
+      />
+      <DataGridPremium {...props} />
+    </React.Fragment>
+  );
+}
+
+export default App;
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js
new file mode 100644
index 0000000000000..822a2937be81f
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+function App() {
+  return (
+    (<React.Fragment>
+      <DataGridPremium
+        experimentalFeatures={{
+          warnIfFocusStateIsNotSynced: true,
+        }}
+      />
+      <DataGridPremium />
+      <DataGridPremium {...props} />
+    </React.Fragment>)
+  );
+}
+
+export default App;
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts
new file mode 100644
index 0000000000000..06abd269a1ce6
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts
@@ -0,0 +1,22 @@
+import removeObjectProperty from '../../../util/removeObjectProperty';
+import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+
+const componentsNames = ['DataGridPremium'];
+const propName = 'experimentalFeatures';
+const propKeys = ['ariaV8'];
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+  };
+
+  propKeys.forEach((propKey) => {
+    removeObjectProperty({ root, j, propName, componentsNames, propKey });
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts
new file mode 100644
index 0000000000000..b9caedfb5f684
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts
@@ -0,0 +1,48 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from '.';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('v8.0.0/data-grid', () => {
+  describe('remove-stabilized-experimentalFeatures', () => {
+    it('transforms props as needed - js', () => {
+      const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});
+
+      const expected = read('./expected.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent - js', () => {
+      const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});
+
+      const expected = read('./expected.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('transforms props as needed - ts', () => {
+      const actual = transform(
+        { source: read('./ts-actual.spec.tsx') },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+      const expected = read('./ts-expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent - ts', () => {
+      const actual = transform(
+        { source: read('./ts-expected.spec.tsx') },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+
+      const expected = read('./ts-expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-actual.spec.tsx b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-actual.spec.tsx
new file mode 100644
index 0000000000000..c91b3cfc067a3
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-actual.spec.tsx
@@ -0,0 +1,25 @@
+// @ts-nocheck
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+// prettier-ignore
+function App() {
+  return (
+    <React.Fragment>
+      <DataGridPremium
+        experimentalFeatures={{
+          warnIfFocusStateIsNotSynced: true,
+          ariaV8: true,
+        }}
+      />
+      <DataGridPremium
+        experimentalFeatures={{
+          ariaV8: true,
+        }}
+      />
+      <DataGridPremium {...props} />
+    </React.Fragment>
+  );
+}
+
+export default App;
diff --git a/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-expected.spec.tsx b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-expected.spec.tsx
new file mode 100644
index 0000000000000..f30689f7397a2
--- /dev/null
+++ b/packages/x-codemod/src/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-expected.spec.tsx
@@ -0,0 +1,20 @@
+// @ts-nocheck
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+// prettier-ignore
+function App() {
+  return (
+    (<React.Fragment>
+      <DataGridPremium
+        experimentalFeatures={{
+          warnIfFocusStateIsNotSynced: true,
+        }}
+      />
+      <DataGridPremium />
+      <DataGridPremium {...props} />
+    </React.Fragment>)
+  );
+}
+
+export default App;
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
index 884470fb17960..feaef4ba95479 100644
--- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
+++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -329,7 +329,6 @@ DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV8: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
diff --git a/packages/x-data-grid-premium/src/hooks/utils/useGridAriaAttributes.tsx b/packages/x-data-grid-premium/src/hooks/utils/useGridAriaAttributes.tsx
index 8c5023f2af49a..74dba76508d69 100644
--- a/packages/x-data-grid-premium/src/hooks/utils/useGridAriaAttributes.tsx
+++ b/packages/x-data-grid-premium/src/hooks/utils/useGridAriaAttributes.tsx
@@ -5,18 +5,13 @@ import {
 } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from '../features/rowGrouping/gridRowGroupingSelector';
 import { useGridPrivateApiContext } from './useGridPrivateApiContext';
-import { useGridRootProps } from './useGridRootProps';
 
 export const useGridAriaAttributes = (): React.HTMLAttributes<HTMLElement> => {
-  const rootProps = useGridRootProps();
   const ariaAttributesPro = useGridAriaAttributesPro();
   const apiRef = useGridPrivateApiContext();
   const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
 
-  const ariaAttributesPremium =
-    rootProps.experimentalFeatures?.ariaV8 && gridRowGroupingModel.length > 0
-      ? { role: 'treegrid' }
-      : {};
+  const ariaAttributesPremium = gridRowGroupingModel.length > 0 ? { role: 'treegrid' } : {};
 
   return {
     ...ariaAttributesPro,
diff --git a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts
index ff1540e70ae43..8ed5498364dab 100644
--- a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts
+++ b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts
@@ -24,14 +24,7 @@ import { GridInitialStatePremium } from './gridStatePremium';
 import { GridApiPremium } from './gridApiPremium';
 import { GridCellSelectionModel } from '../hooks/features/cellSelection';
 
-export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
-  /**
-   * Enables accessibility improvements that will be enabled by default in V8.
-   * If you rely on the v7 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-   * @default false
-   */
-  ariaV8: boolean;
-}
+export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {}
 
 export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing
   extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {