[data grid] a11y the toolbar should be outside of the role='grid' element

[tj36]

Hello, I am having an accessibility issue and I'm having trouble debugging this.

Please let me know if there is a resolution for this. Thanks.

[alexfauquette]

Where can we see your data grid, and what is the tool you're using for this report?

Because with only the generic message in your screenshot, we will not be able to investigate

[tj36]

Hi @alexfauquette ,
Below is the code I have.

<DataGrid columns={columns} rows={notifications.data?.data?.data?.result?.entries ?? []} rowCount={rowCountState} loading={notifications.isLoading} page={pageNumber} pageSize={pageSize} paginationMode="server" onPageChange={newPageNumber => setPageNumber(newPageNumber)} autoHeight />

Below is the grid I see on the UI

I am using storybook to test the code.
Please let me know if you need some more details.

[m4theushw]

Could you create a CodeSandbox reproducing the error? Without more details there's no much we can do.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[eljo]

Stumbled across the same. Steps to reproduce:

Steps:

1. Install the axe DevTools extension (for chrome: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd/related)
2. Open https://mui.com/x/react-data-grid/demo/
3. Open the axe DevTools tab and run a page scan
4. Open resulting "Certain ARIA roles must contain particular children" result.

[alexfauquette]

From what I understand, the problem comes from the toolbar. The role="grid" should not includes the toolbar. It only expect row and row headers (no button or input)

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[RPiAwesomeness]

Just another data point, but I've run into this using @mui/x-data-grid-pro version 5.17.20

[emilefleming]

@alexfauquette were you able to find a workaround?

[alexfauquette]

I'm not sure there is a workaround. It would require to move the role attributes but I'm wondering if it's doable without a breaking change.

[romgrk]

We should add to #7902 then.

[cherniavskii]

While changing aria attributes would be a breaking change, we can do this under the experimental ariaV7 flag, so that we can unblock people and prepare these changes in advance.
@romgrk What do you think?
I looked into it while investigating #9403 and I can submit a draft PR.

[romgrk]

Yeah, fixing this would probably be a breaking change. I was thinking we could fix this and do the DOM layout change required for point 1 of #9171 at the same time.

I'm not sure how you see this working but if you have it figured out feel free to open a PR right away.

[cherniavskii]

@romgrk I have opened #9496, let's discuss it there

[oliviertassinari]

I have seen this issue too in the past. For example, it's reported by Lighthouse: https://pagespeed.web.dev/analysis/https-mui-com-x/2irxt3dly6?hl=en&form_factor=desktop

While changing aria attributes would be a breaking change

I'm not sure, it could be sold as a bug fix.

[cherniavskii]

I'm not sure, it could be sold as a bug fix.

Perhaps, but people might use the role in their tests as we do:

mui-x/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx

Line 238 in 889af42

const firstHeight = getByRole('grid').clientHeight;

This might break things for them.