[DataGridPremium] Remove the ariaV8 experimental flag (mui#15694)

docs/data/data-grid/row-grouping/RowGroupingFullExample.js

@@ -40,7 +40,6 @@ export default function RowGroupingFullExample() {
         groupingColDef={{
           leafField: 'traderEmail',
         }}
-        experimentalFeatures={{ ariaV8: true }}
       />
     </div>
   );

docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx

@@ -40,7 +40,6 @@ export default function RowGroupingFullExample() {
         groupingColDef={{
           leafField: 'traderEmail',
         }}
-        experimentalFeatures={{ ariaV8: true }}
       />
     </div>
   );

docs/data/data-grid/row-grouping/RowGroupingFullExample.tsx.preview

@@ -7,5 +7,4 @@
   groupingColDef={{
     leafField: 'traderEmail',
   }}
-  experimentalFeatures={{ ariaV8: true }}
 />

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}}

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

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": {

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

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;

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;

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);
+}

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');
+    });
+  });
+});

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;

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;

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,
   }),
   /**

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,