[pickers] Add PageUp and PageDown support for time components

[arthurbalduini]

Closes #14548

To achieve it on the DigitalClock and MultiSectionDigitalClock I had to manipulate the list focus on our side. This approach was discussed with Diego and Jun.

[mui-bot]

Deploy preview: https://deploy-preview-14812--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 5355f67

[flaviendelangle]

Great to see the accessibility improving here
Thanks for synchronizing with the core team 👍

[LukasTy]

Thank you, this is a nice improvement! 👍
There could be ideas on how to improve behavior with different timeSteps settings, but that's debatable and I'd say a question we should raise only when community demands it. 👍

[LukasTy]

LGTM. 👍
Leaving a final nitpick for the tests in general.
But feel free to ignore it as we'd need to add eslint ignores to allow for this.
We can keep it for when we refactor to use userEvent. 👍

[oliviertassinari]

This code is impossible to reach?

Suggested change

	if (!listRef.current) {
	return;
	}

[arthurbalduini]

In theory listRef.current can be null, so this is meant to assure null safety on the lines below (and prevent TS complaints 😅)

[oliviertassinari]

In theory listRef.current can be null

Only if the ref is not applied to the right element. This sounds unlikely to happen in a future refactoring, not with our test suite.

I think that using listRef.current! so it gets transpiled to listRef.current is much better. No extra bundle size or runtime time spent on this. If done at scale, I would hope this brings more than a +1% improvement.

[LukasTy]

That was my suggestion to go the safer route and prevent cases where DOM could be tampered with.
But given most other cases, where <x>Ref.current is accessed, we could indeed simplify to listRef.current!.

[arthurbalduini]

Makes sense ! I will add it to this PR
Thanks for the suggestion 🙏

[oliviertassinari]

How about we simplify it down to?

Suggested change

	const children = listElement.children;
	return Array.from(children).findIndex((child) => child === getActiveElement(document));
	return Array.from(listElement.children).indexOf(getActiveElement(document)!);

[arthurbalduini]

Indeed IndexOf is more performatic than findIndex
Opened this PR for it

Thanks ! 🙂