[DataGridPro] Fix Tree Data and Row Grouping rows accessibility

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

@@ -0,0 +1,32 @@
+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>
+  );
+}

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

@@ -0,0 +1,32 @@
+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>
+  );
+}

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

@@ -0,0 +1,6 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  initialState={initialState}
+  experimentalFeatures={{ ariaV8: true }}
+/>

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

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

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

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

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

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

docs/data/data-grid/row-grouping/row-grouping.md

@@ -344,6 +344,22 @@ 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/pages/x/api/data-grid/data-grid-premium.json

@@ -75,7 +75,10 @@
     },
     "estimatedRowCount": { "type": { "name": "number" } },
     "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" }
+      "type": {
+        "name": "shape",
+        "description": "{ ariaV8?: bool, warnIfFocusStateIsNotSynced?: bool }"
+      }
     },
     "filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
     "filterMode": {

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -223,7 +223,7 @@
       "description": "Determines if a row can be selected.",
       "typeDescriptions": {
         "params": "With all properties from <a href='/x/api/data-grid/grid-row-params/'>GridRowParams</a>.",
-        "boolean": "A boolean indicating if the cell is selectable."
+        "boolean": "A boolean indicating if the row is selectable."
       }
     },
     "keepColumnPositionIfDraggedOutside": {

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -204,7 +204,7 @@
       "description": "Determines if a row can be selected.",
       "typeDescriptions": {
         "params": "With all properties from <a href='/x/api/data-grid/grid-row-params/'>GridRowParams</a>.",
-        "boolean": "A boolean indicating if the cell is selectable."
+        "boolean": "A boolean indicating if the row is selectable."
       }
     },
     "keepColumnPositionIfDraggedOutside": {

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -150,7 +150,7 @@
       "description": "Determines if a row can be selected.",
       "typeDescriptions": {
         "params": "With all properties from <a href='/x/api/data-grid/grid-row-params/'>GridRowParams</a>.",
-        "boolean": "A boolean indicating if the cell is selectable."
+        "boolean": "A boolean indicating if the row is selectable."
       }
     },
     "keepNonExistentRowsSelected": {

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -23,9 +23,17 @@ import {
 } from '../models/dataGridPremiumProps';
 import { useDataGridPremiumProps } from './useDataGridPremiumProps';
 import { getReleaseInfo } from '../utils/releaseInfo';
+import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 
 export type { GridPremiumSlotsComponent as GridSlots } from '../models';
 
+const configuration = {
+  hooks: {
+    useGridAriaAttributes,
+    useGridRowAriaAttributes,
+  },
+};
 const releaseInfo = getReleaseInfo();
 
 let dataGridPremiumPropValidators: PropValidator<DataGridPremiumProcessedProps>[];
@@ -40,14 +48,13 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
 ) {
   const props = useDataGridPremiumProps(inProps);
   const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
-
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
 
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, dataGridPremiumPropValidators);
   }
   return (
-    <GridContextProvider privateApiRef={privateApiRef} props={props}>
+    <GridContextProvider privateApiRef={privateApiRef} configuration={configuration} props={props}>
       <GridRoot
         className={props.className}
         style={props.style}
@@ -312,6 +319,7 @@ 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,
   }),
   /**
@@ -486,7 +494,7 @@ DataGridPremiumRaw.propTypes = {
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {boolean} A boolean indicating if the cell is selectable.
+   * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: PropTypes.func,
   /**

packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -83,6 +83,7 @@ export const filterRowTreeFromGroupingColumns = (
 ): Omit<GridFilterState, 'filterModel'> => {
   const { apiRef, rowTree, isRowMatchingFilters, filterModel } = params;
   const filteredRowsLookup: Record<GridRowId, boolean> = {};
+  const filteredChildrenCountLookup: Record<GridRowId, number> = {};
   const filteredDescendantCountLookup: Record<GridRowId, number> = {};
   const filterCache = {};
 
@@ -110,6 +111,7 @@ export const filterRowTreeFromGroupingColumns = (
       isPassingFiltering = true;
     }
 
+    let filteredChildrenCount = 0;
     let filteredDescendantCount = 0;
     if (node.type === 'group') {
       node.children.forEach((childId) => {
@@ -120,6 +122,9 @@ export const filterRowTreeFromGroupingColumns = (
           [...ancestorsResults, filterResults],
         );
         filteredDescendantCount += childSubTreeSize;
+        if (childSubTreeSize > 0) {
+          filteredChildrenCount += 1;
+        }
       });
     }
 
@@ -145,6 +150,7 @@ export const filterRowTreeFromGroupingColumns = (
       return 0;
     }
 
+    filteredChildrenCountLookup[node.id] = filteredChildrenCount;
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
     if (node.type !== 'group') {
@@ -164,6 +170,7 @@ export const filterRowTreeFromGroupingColumns = (
 
   return {
     filteredRowsLookup,
+    filteredChildrenCountLookup,
     filteredDescendantCountLookup,
   };
 };

packages/x-data-grid-premium/src/hooks/features/rows/index.tsx

@@ -0,0 +1 @@
+export * from './useGridRowAriaAttributes';

packages/x-data-grid-premium/src/hooks/features/rows/useGridRowAriaAttributes.tsx

@@ -0,0 +1,12 @@
+import {
+  useGridRowAriaAttributes as useGridRowAriaAttributesPro,
+  useGridSelector,
+} from '@mui/x-data-grid-pro/internals';
+import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../rowGrouping/gridRowGroupingSelector';
+
+export const useGridRowAriaAttributes = () => {
+  const apiRef = useGridPrivateApiContext();
+  const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  return useGridRowAriaAttributesPro(gridRowGroupingModel.length > 0);
+};

packages/x-data-grid-premium/src/hooks/utils/useGridAriaAttributes.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {
+  useGridAriaAttributes as useGridAriaAttributesPro,
+  useGridSelector,
+} 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' }
+      : {};
+
+  return {
+    ...ariaAttributesPro,
+    ...ariaAttributesPremium,
+  };
+};

packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts

@@ -24,7 +24,14 @@ import { GridInitialStatePremium } from './gridStatePremium';
 import { GridApiPremium } from './gridApiPremium';
 import { GridCellSelectionModel } from '../hooks/features/cellSelection';
 
-export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {}
+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 DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing
   extends Pick<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'localeText'> {

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

@@ -14,6 +14,7 @@ import {
   getColumnValues,
   getCell,
   getSelectByName,
+  getRow,
 } from 'test/utils/helperFn';
 import { expect } from 'chai';
 import {
@@ -2381,6 +2382,45 @@ describe('<DataGridPremium /> - Row grouping', () => {
         // Corresponds to rows id 0, 1, 2 because of Cat A, ann id 4 because of Cat 1
         expect(getColumnValues(1)).to.deep.equal(['', '0', '1', '2', '', '4']);
       });
+
+      it('should keep the correct count of the children and descendants in the filter state', () => {
+        const extendedColumns = [
+          ...baselineProps.columns,
+          {
+            field: 'value1',
+          },
+        ];
+
+        const extendedRows = rows.map((row, index) => ({ ...row, value1: `Value${index}` }));
+        const additionalRows = [
+          { id: 5, category1: 'Cat A', category2: 'Cat 2', value1: 'Value5' },
+          { id: 6, category1: 'Cat A', category2: 'Cat 2', value1: 'Value6' },
+          { id: 7, category1: 'Cat B', category2: 'Cat 1', value1: 'Value7' },
+        ];
+
+        render(
+          <Test
+            columns={extendedColumns}
+            rows={[...extendedRows, ...additionalRows]}
+            initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
+            defaultGroupingExpansionDepth={3}
+            rowGroupingColumnMode="multiple"
+          />,
+        );
+
+        const { filteredChildrenCountLookup, filteredDescendantCountLookup } =
+          apiRef.current.state.filter;
+
+        expect(filteredChildrenCountLookup['auto-generated-row-category1/Cat A']).to.equal(2);
+        expect(filteredDescendantCountLookup['auto-generated-row-category1/Cat A']).to.equal(5);
+
+        expect(
+          filteredChildrenCountLookup['auto-generated-row-category1/Cat A-category2/Cat 2'],
+        ).to.equal(4);
+        expect(
+          filteredDescendantCountLookup['auto-generated-row-category1/Cat A-category2/Cat 2'],
+        ).to.equal(4);
+      });
     });
 
     describe('prop: rowGroupingColumnMode = "multiple"', () => {
@@ -2723,6 +2763,27 @@ describe('<DataGridPremium /> - Row grouping', () => {
     });
   });
 
+  describe('accessibility', () => {
+    it('should add necessary treegrid aria attributes to the rows', () => {
+      render(
+        <Test
+          initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
+          defaultGroupingExpansionDepth={-1}
+          rowGroupingColumnMode="multiple"
+        />,
+      );
+
+      expect(getRow(0).getAttribute('aria-level')).to.equal('1'); // Cat A
+      expect(getRow(1).getAttribute('aria-level')).to.equal('2'); // Cat 1
+      expect(getRow(1).getAttribute('aria-posinset')).to.equal('1');
+      expect(getRow(1).getAttribute('aria-setsize')).to.equal('2'); // Cat A has Cat 1 & Cat 2
+      expect(getRow(2).getAttribute('aria-level')).to.equal('3'); // Cat 1 row
+      expect(getRow(3).getAttribute('aria-posinset')).to.equal('2'); // Cat 2
+      expect(getRow(4).getAttribute('aria-posinset')).to.equal('1'); // Cat 2 row
+      expect(getRow(4).getAttribute('aria-setsize')).to.equal('2'); // Cat 2 has 2 rows
+    });
+  });
+
   // See https://github.com/mui/mui-x/issues/8626
   it('should properly update the rows when they change', async () => {
     render(