[pickers] Adds RTL verification for the time pickers default views

[arthurbalduini]

Closes #11525

[mui-bot]

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

Generated by 🚫 dangerJS against f65ac35

[LukasTy]

It should also apply to the plain MultiSectionDigitalClock.

[LukasTy]

I feel like it should be doable within MultiSectionDigitalClock using style adjustments.
Have you considered a flex order?

[LukasTy]

We are playing with fire here regarding views. 🙈
Making such structural views adjustments is tricky and this is the place where such change creates the most problems. 🙈
The tabulation/views process does not work as expected in RTL mode.
Given a demo with default settings, the minutes view is skipped—selecting hours jumps the focus to meridiem and after selecting it the Picker closes.

Have you tried adjusting only the views intended for rendering?

[Eliav2]

Dude I'm not sure what you changed there but it looks overkill
Want me to make a PR ?

[LukasTy]

Dude I'm not sure what you changed there but it looks overkill
Want me to make a PR ?

If you have ideas on how to do it—the suggestion are welcome.
I imagine, that given your suggestion, all the time sections, except for meridiem should be wrapped in a single element and then your suggestion should apply.

Or do you @Eliav2 have a suggestion on how to achieve it without a breaking DOM change? 🤔

[LukasTy]

Great work! 👏

We are snapshot testing docs only in ltr mode, so, any regressions on this regard might go unnoticed.
WDYT about adding an e2e regression test for rtl behavior? 🤔

[LukasTy]

Nitpick: just to avoid unnecessary diff. 🙈

Suggested change

	(res, currentView) => {
	return { ...res, [currentView]: buildViewProps(currentView) };
	(result, currentView) => {
	return { ...result, [currentView]: buildViewProps(currentView) };