[data grid] Keyboard navigation using Tab key

[socramm9]

Summary 💡

Is there a reason why navigation with the Tab key is not supported? https://mui.com/x/react-data-grid/accessibility/#navigation

I was trying out the Editing feature and noticed that it dosen't feel natural for me to navigate between cells after editing.

What I mean:

1. Go to a cell and Edit it
2. confirm using Tab
3. Focus jumps to next cell

Everything fine so far, but pressing Tab again loses focus from the grid. I would expect the focus to shift again to the next cell.

But like it is implemented now I would have to use the Arrow keys to go to the next cell.

The only way to get the behavior that i would expect is to set editMode="row". It works fine but I would prefer if it was Possible without

Examples 🌈

No response

Motivation 🔦

Make my Grid behave like Excel

Order ID 💳 (optional)

26327

[m4theushw]

Is there a reason why navigation with the Tab key is not supported?

Yes, the grid is treated as a composite widget. In this case, only one focusable element is included in the tab sequence, where this focusable element can be a cell or a column header. To navigate between elements, the arrows keys should be used and Tab to leave the grid and move focus to the next element in the page tab sequence.

From https://www.w3.org/WAI/ARIA/apg/patterns/grid/

A grid is a composite widget so it: Always contains multiple focusable elements. Only one of the focusable elements contained by the grid is included in the page tab sequence. Requires the author to provide code that manages focus movement inside it.

---

I would expect the focus to shift again to the next cell.

Navigation between cells with Tab is not supported out-of-box, but you can have it with a bit of customization. See the example in https://github.com/mui/mui-x/issues/3016#issuecomment-955079280

---

@mui/x I can remember of https://github.com/mui/mui-x/issues/3016#issuecomment-954651782 and https://github.com/mui/mui-x/issues/4201#issuecomment-1069048222 asking why TAB doesn't navigate between cells. It's hard to sell the idea that the arrows key should be used when Excel and other grids support TAB. I propose we add a prop to allow navigation using this key, while still supporting the arrow keys. The new prop is false by default. What do you think?

[socramm9]

The new prop is false by default. What do you think?

Yes, it would be great to give users that need such behavior an out of the box solution. I wouldn't mind if it has to be activated.

See the example in https://github.com/mui/mui-x/issues/3016#issuecomment-955079280

Thanks a lot, will try that.

[flaviendelangle]

AG-Grid have the cell tab navigation enabled by default. Do you want to keep it disabled so that we follow the "composite widget" approach ?

[m4theushw]

@flaviendelangle Yes, it will be disabled by default because the "composite widget" is the recommended approach if we want to follow https://www.w3.org/WAI/ARIA/apg/patterns/grid/. If we enable it by default it will kind of of a "breaking change" for users.

[flaviendelangle]

OK

So if I understand correctly we don't intend to make it the default behavior in v6, it's a step aside from the aria spec but that many people want to it seems fair to make it an option

---

At one point, would it make sense to have a prop to customize the overall tab behavior of the grid ? To be able to choose between

• composite widget
• inline (probably wrong name, but a grid with the tab like a regular table)
• none (#2113)

[m4theushw]

@flaviendelangle I don't think we should allow to disable the arrow keys while role=grid. If we do, we wouldn't be following the spec. However, if we want to allow only Tab to navigate between cells, then makes sense to also change role to table. With role=grid, screen reader users might expect that the arrow keys will work, but with role=table is different:

All focusable elements contained in a table are included in the page tab sequence.

Maybe #2113 can be achieved by setting tabIndex via componentsProps, or creating a custom cell. Not sure if it's worth to add a prop.

The new prop I'm proposing here will only enhance the default keyboard navigation. The arrow keys will still work.

[netgfx]

So is it possible to use Tab to move from one cell to the other (and enable editing?) as someone would expect from other very popular datagrids (excel, etc)?

[cherniavskii]

@netgfx Did you try componentProps.cell to override tabIndex? Something like this: https://codesandbox.io/s/basiceditinggrid-demo-mui-x-forked-wrczt2

[alexfauquette]

componentProps.cell.tabIndex=0 has one limitation: the column pinning. Because Tab will move focus to the cell below in the pinned column

[oliviertassinari]

@m4theushw Had shared another demo on https://github.com/mui/mui-x/issues/4658#issuecomment-1110047494.

At a general level, I think that it would be great to have an official demo (that we improve as we find bugs with it) on how to do this. It sounds like a frequent enough customization use case. Personally, I always use the arrow keys in Excel to move between cells and would expect Tab to move to the next composite widget, but I can get why some product designers would want to change the UX to match exactly Excel or Google Spreadsheet or Notion or Airtable.

---

I have changed tabIndex = 1 to tabIndex = 0 in the previous comments per https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[PraveenPeri]

@oliviertassinari @flaviendelangle @m4theushw I have a partly related question about this. How can we get into the table cells here https://codesandbox.io/s/n9zzom?file=/demo.tsx using just the keyboard? Looks like there is no focusable element in the page tab sequence after 'Add Record' button that we can hang on to

[Safouene1]

Hey , is there any way to customize the Tab Key ? like doing it with Enter key instead