Date Picker Arrow Switcher on RTL - Wrong Order

[ahamdan-ow]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-x-issue-template-forked-phfl5h

Steps:

1.Open the calendar from the date picker in the example, the calendar is using RTL mode for display
2.Noitce the Next/Previous buttons for switching months

Current behavior 😯

When opening the date picker in RTL, for the month arrows, the next and previous button appear switched, i.e. the next button appears to the right while the previous button appears to the left. This resulted in users clicking on the right button thinking that it will go to the previous month, while in fact its taking them to the next month.

Expected behavior 🤔

In RTL mode, for the month arrows, the next button should appear to the left, while the previous button should appear to the right.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  I am using Google Chrome Version Version 115.0.5790.171

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.10
    @mui/core-downloads-tracker:  5.14.4
    @mui/material: ^5.14.4 => 5.14.4
    @mui/private-theming:  5.14.4
    @mui/styled-engine:  5.13.2
    @mui/system:  5.14.4
    @mui/types:  7.2.4
    @mui/utils:  5.14.4
    @mui/x-date-pickers: ^6.11.0 => 6.11.0
    @types/react: ^18.2.15 => 18.2.20
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0