[docs] Explain how to manage focus with renderCell

[alexfauquette]

Preview: https://deploy-preview-4254--material-ui-x.netlify.app/x/react-data-grid/accessibility/#tab-sequence

Part of #4219

The goal of this PR is to explain in the doc how to remove focusable elements from the tab sequence if the cell does not have the focus

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	265.9	518.5	415.9	385.68	89.728
Sort 100k rows	ms	489.9	990.2	795.4	779.34	174.618
Select 100k rows	ms	149.9	267.3	204.7	204.52	37.612
Deselect 100k rows	ms	96.8	296.2	215.3	184.96	67.904

Generated by 🚫 dangerJS against e0fa0f9

[m4theushw]

Could you also stop the ripple when the cell loses focus?

mui-x/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx

Lines 68 to 76 in 249969c

	React.useLayoutEffect(() => {
	if (hasFocus) {
	const input = checkboxElement.current?.querySelector('input');
	input?.focus();
	} else if (rippleRef.current) {
	// Only available in @mui/material v5.4.1 or later
	rippleRef.current.stop({});
	}
	}, [hasFocus]);

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[m4theushw]

I don't think using "focusable elements" here is correct. An element can be focusable but not tabbable. What happens is that some HTML elements have implicit tabIndex=0, e.g. <a />.

Suggested change

	If you are customizing cell rendering with [`renderCell`](/components/data-grid/columns/#render-cell) method, you become responsible of removing focusable elements from the page tab sequence.
	To do so, use the `hasFocus` property from the `renderCell` input, to know if the rendered cell has the focus, and so if the elements should be removed from the tab sequence.
	If you are customizing cell rendering with [`renderCell`](/components/data-grid/columns/#render-cell) method, you become responsible for removing focusable elements from the page tab sequence.
	To do so, use the `tabIndex` prop passed to the `renderCell` params, to know if the rendered cell has the focus, and so if the elements should be removed from the tab sequence.

[alexfauquette]

I replaced the use of hasFocus by tabIndex in the demo too.

[m4theushw]

Selecting one cell breaks the demo.

Maybe split into two demos so the focus reset button can be used:

[alexfauquette]

I used hideFooterSelectedRowCount to avoid having the "selected row count" modifying the width of the table

[m4theushw]

I'm not very sure if we should keep two grids inside the same demo. The "reset focus" button is very useful to test the accessibility here. If I click it the focus goes to the first grid.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[m4theushw]

Once #4600 is merged we can add a link to the newly added section: #4600 (comment)

[m4theushw]

I'm not very sure if we should keep two grids inside the same demo. The "reset focus" button is very useful to test the accessibility here. If I click it the focus goes to the first grid.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[oliviertassinari]

This is a private type import (more than 1 folder level deep) 🚫, we will need to change this. More details in https://mui.com/material-ui/guides/minimizing-bundle-size/.