[data grid] Unable to move out from a cell with a Link (React-Router) using arrow keys

[sagar1111212121]

The problem in depth

We are trying to make our site AA accessibility compliant. What we have observed in the DataGrid is, arrow keys are working all well until we have custom columns using cellRender where we have used react-router's Link.

We are able to focus it using arrow key but once focus is set in that cell, it is not coming out using arrow keys.

We have checked on the MUI Accessibility section 'https://v6.mui.com/x/react-data-grid/accessibility/#system-GridAriaV7.tsx'. there also we see similar issue where, once focus is on email column, user is unable to move out to next column using arrow key.

 const fiDataGridColData: GridColDef[] = [
    {
      field: NAME_FIELD,
      headerName: NAME,
      disableColumnMenu: true,
      flex: 2,
      renderCell: (params: any) => {
        const fiNameWithoutSpace = `${params?.row?.name.replaceAll(/\s/g, '')}FI_Link`;
        return (
          <Tooltip description={params.row.name} placement='top'>
            <Link
              tabIndex={params.tabIndex}
              to={`/financialinstitution/${params.row.fiId}`}>
              {params.row.name}
            </Link>
          </Tooltip>
        );
      },
    },
    {
      field: CLIENT_ID_FIELD,
      headerName: CLIENT_ID,
      disableColumnMenu: true,
      flex: 1,
    },
  ];

   <DataGridPro
        rows={fiDataGridRowData}
        columns={fiDataGridColData}
        ....
   />

Your environment

`npx @mui/envinfo`

  Chrome Browser
  Output from `npx @mui/envinfo` goes here.

Search keywords: Datagrid accessibility
Order ID: 81479

[romgrk]

Could you please share your reproduction case in a runnable sandbox? You can fork any of the docs demo using these buttons: https://mui.com/x/introduction/support/#bug-reproductions

[sagar1111212121]

https://codesandbox.io/p/sandbox/4kndfg?file=%2Fsrc%2FDemo.tsx%3A23%2C18

This is MUI Datagrid demo only. So what we have observed is, Arrow keys on link and custom column having button or icon button works just fine in normal case but if we have screen reader like 'NVDA' running, arrow key stuck at such link/custom column having buttons and it does not shift left or right on arrow key press.

You can try same on above by running NVDA and without NVDA.

With NVDA running, once such link column is in focus and when we press arrow key, instead of jumping focus to next cell, it reads each character withing that link.

Is there any solution for this?

[romgrk]

Could you put your code inside that codesandbox? Or is the problem reproducible with the demo as it is?

[sagar1111212121]

Yes, you can reproduce issue with this demo itself. Keep NVDA screen reader running and then try to use keyboard on the email column. It doesnt move out of email column

https://codesandbox.io/p/sandbox/4kndfg?file=%2Fsrc%2FDemo.tsx%3A23%2C18

[romgrk]

This problem is present in other grids and is an NVDA issue/bug:

• Focus on element in gridcell: Using arrow keys makes NVDA switch to browse mode nvaccess/nvda#8395
• Auto browse mode turns off in a grid when focus lands on a checkbox nvaccess/nvda#11413
• On using the table shortcut key, ‘Ctrl+Alt+Arrow’ keys for navigation in the grid cells, NVDA announces as ‘not in a table cell’.  nvaccess/nvda#13476

I'm not sure there's anything we can do from here, it would be best to comment on the upstream issues. You can link to this issue to highlight the importance of fixing the issue in NVDA.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.