[DataGrid] turn-off tabindex, remove from the tab sequence

[EdmundsEcho]

Reading through the issues on the topic of tabindex, it looks like you all have come up with some useful default behavior.

However, I could not figure out if/where there was a way to set the tabindex to "-1" so that the data-grid is ignored when hitting tab. I use the grid in context of several other form elements. I use it to mostly "view" the data, less so to edit the data... thus the motivation to remove the grid from the "data-entry" sequence per se.

Thanks for either letting me know how to do so now, or otherwise as a potential feature.

Order id 💳

[oliviertassinari]

I use it to mostly "view" the data

@EdmundsEcho Great point. I think that we miss a prop to disable cell selection. Here is why:

Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. The grid pattern is used to make an interactive widget that has a tabular structure.

https://www.w3.org/TR/wai-aria-practices-1.1/#table

---

What would be your expected behavior on the headers?

Related to #1442.

[EdmundsEcho]

...glad to see the supporting text for the use case. This said, clearly the data-grid will be used for both "view" and "edit" modes.

When in the "view" mode, I would not expect to have any of the elements in the grid-component being part of the tab-sequence... other than the paging buttons if they exist. This means, as a user, if I want to "work with the view", i.e., filter and sorting, I would expect to have to use my mouse to select what I want to do.

Given the following groups of sequences:

1. pagination buttons (first active of prev/next)

2. hd (first to last active)

3. td -> emulate the MS Excel behavior with a twist given the unique context here:

   • edit -> return -> takes you to the cell to the right until the next cell isn't editable...

   • ... at which point move to the first cell the person edited in that row, but now one row below
     * this means any immutable cell serves to trigger "next row"
     * this also means that the column starting point is set by where the person started editing in the row

   • the tab button can be used to skip to next editable cell on the same row if one exists,

   • ... otherwise find the next edible cell on the next row below.

IMO the following tabindex enum might be useful prop choice:

• viewOnly: (1), (2), (3)
• filterAndSort: (2), (1), (3)
• edit: (3), (1), (2)

Part of my thinking: If someone is editing the data, likely the amount of data is less compared to other scenarios. This means, less demand for filtering when editing. If paging exists, it's part of navigation, and thus a higher priority.

I hope this helps.

PS: I had what I thought was a good idea for the Mui platform in general. I posted the suggestion, but it seems to have stalled. In a nutshell, the theme overrides prop users likely would benefit from a MuiOverridesTag that maps to <span />. It's the equivalent of the pure or identity function in other languages... Mui is a language :)) I outlined the idea with further details and rationale in the "new feature" section of Mui issues.

[m4theushw]

We don't plan to add a prop to remove the grid from the tab sequence. This is the opposite of what the accessibility guidelines recommend. Instead, you can listen for Tab events that occur in an element before the grid, then focus another element after the grid. This will prevent the focus going to the grid. You can check the following example: https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-98fx3j?file=/demo.tsx:2129-2144