[DataGrid] The checkbox shouldn't be tabbable

[oliviertassinari]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The select all checkbox is in the tab order

Expected Behavior 🤔

The select all checkbox is not in the tab order

Steps to Reproduce 🕹

1. Open https://material-ui.com/components/data-grid/#mit-version
2. Use Tab to reach a data grid

Context

This is a follow-up on #1289. We missed a tabIndex={-1} on the checkbox and test cases.

Your Environment 🌎

v4.0.0-alpha.25

[dtassone]

Why shouldn't it be in tabbable? It's a control with a button behind it 🤔

[DanailH]

We removed the tabIndex from all other checkboxes as it hijacks the keyboard control. basically using the keyboard to navigate to a cell with a checkbox and hitting enter or space should select that checkbox. At least that is how I understood it.

[oliviertassinari]

Why shouldn't it be in tabbable?

@dtassone Because this is described in the WAI-ARIA authoring practices. The grid is a composite widget. They reiterate what this notion means:

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 (tabbable).
• Requires the author to provide code that manages focus movement inside it.

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

Now, the cell > checkbox case falls under this section:

When the above grid navigation keys move focus, whether the focus is set on an element inside the cell or the grid cell depends on cell content. See Whether to Focus on a Cell or an Element Inside It.

In theory, we should have the checkbox tabbable and focused, not the cell. This is because a checkbox doesn't have any key handler that conflicts with the grid arrow navigation. In practice, I'm not sure it's manageable.

We also don't remove the tab index from all the cells developers are providing. IMHO, we should take shortcuts and document how developers can implement it correctly, using our API, but not have the data grid bring an implementation fully compliant by default. For instance, in a cell, the developer could listen to the change focus event, and do the heavy lifting (move focus, remote tabIndex on their side). We could start with this column:

[joserodolfofreitas]

The expected behavior is already implemented on the latest version