[EuiDataGrid] On pagination, focus is not properly restored to a valid data grid cell

[cee-chen]

Caught by @miukimiu in #5561 (review):

When clicking a pagination number the .euiDataGridBody outline appears and we see a black border on top of the pagination.

This is occuring in Chrome, Firefox, and Safari - Safari just makes it more obvious because of its black outline.

Repro steps

• On https://elastic.github.io/eui/#/tabular-content/data-grid, do not click into any cells
• Paginate to page 2
• Notice focus is automatically set to the first visible cell
• Paginate to page 3
• Notice focus is not restored correctly back into the data grid

Problem

This issue occurs due to the aria-controls property on our pagination component:

eui/src/components/datagrid/utils/data_grid_pagination.tsx

Lines 61 to 63 in dff7a77

	<div className="euiDataGrid__pagination">
	<EuiTablePagination
	aria-controls={controls}

Which, in our pagination component, we have some extra code that attempts to focus back onto the passed element, in this case our data grid:

eui/src/components/pagination/pagination.tsx

Lines 84 to 90 in c25a2c2

	if (ariaControls) {
	const controlledElement = document.getElementById(ariaControls);
	if (controlledElement) {
	controlledElement.focus();
	}
	}

However, our data grid body has conditional tabIndex/onFocus logic which pagination does not know about:

eui/src/components/datagrid/utils/focus.ts

Lines 108 to 117 in ca4435a

	const focusProps = useMemo<FocusProps>(
	() =>
	isFocusedCellInView
	? {
	// FireFox allows tabbing to a div that is scrollable, while Chrome does not
	tabIndex: -1,
	}
	: {
	tabIndex: 0,
	onFocus: (e) => {

Solution

The solution here is to fire a manual setFocusedCell() API call onChangePage (which incidentally now also takes care of scrolling back upwards in the grid) instead of relying on aria-controls to focus onto the grid, due to our grid's complex focus behaivor.