From 681058da7bd585b90be729fc6b63458f1c258780 Mon Sep 17 00:00:00 2001
From: Thomas Moon <thomas.moon@teamit.fi>
Date: Wed, 25 Sep 2024 18:55:24 +0300
Subject: [PATCH] [pickers] Fix left-right keyboard nav with
 `yearsOrder="desc"` and `direction="rtl"` (#14682)

---
 .../src/YearCalendar/YearCalendar.tsx         |  3 +-
 .../tests/keyboard.YearCalendar.test.tsx      | 76 +++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 packages/x-date-pickers/src/YearCalendar/tests/keyboard.YearCalendar.test.tsx

diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx
index 0091036bcef39..54ba0510d32c1 100644
--- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx
@@ -226,7 +226,8 @@ export const YearCalendar = React.forwardRef(function YearCalendar<TDate extends
   }, [selectedYear]);
 
   const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
-  const horizontalDirection = isRtl || yearsOrder === 'desc' ? -1 : 1;
+  const horizontalDirection =
+    (isRtl && yearsOrder === 'asc') || (!isRtl && yearsOrder === 'desc') ? -1 : 1;
 
   const handleKeyDown = useEventCallback((event: React.KeyboardEvent, year: number) => {
     switch (event.key) {
diff --git a/packages/x-date-pickers/src/YearCalendar/tests/keyboard.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/keyboard.YearCalendar.test.tsx
new file mode 100644
index 0000000000000..f43ff85ae109a
--- /dev/null
+++ b/packages/x-date-pickers/src/YearCalendar/tests/keyboard.YearCalendar.test.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { fireEvent, screen } from '@mui/internal-test-utils';
+import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
+import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+/* eslint-disable material-ui/disallow-active-element-as-key-event-target */
+describe('<YearCalendar /> - Keyboard', () => {
+  const { render } = createPickerRenderer({ clock: 'fake', clockConfig: new Date(2000, 0, 1) });
+
+  const RTL_THEME = createTheme({
+    direction: 'rtl',
+  });
+
+  function changeYear(
+    keyPressed: string,
+    expectedValue: string,
+    yearsOrder: 'asc' | 'desc' = 'asc',
+    direction: 'ltr' | 'rtl' = 'ltr',
+  ) {
+    const yearCalendar = (
+      <YearCalendar
+        value={adapterToUse.date('2000-01-01')}
+        minDate={adapterToUse.date('1999-01-01')}
+        maxDate={adapterToUse.date('2001-01-01')}
+        yearsOrder={yearsOrder}
+      />
+    );
+
+    const elementsToRender =
+      direction === 'rtl' ? (
+        <ThemeProvider theme={RTL_THEME}>{yearCalendar}</ThemeProvider>
+      ) : (
+        yearCalendar
+      );
+
+    render(elementsToRender);
+    const startYear = screen.getByRole('radio', { checked: true });
+    fireEvent.focus(startYear);
+    fireEvent.keyDown(document.activeElement!, { key: keyPressed });
+    expect(document.activeElement?.textContent).to.equal(expectedValue);
+  }
+
+  it('should increase the year when pressing right and yearsOrder is asc (default)', () => {
+    changeYear('ArrowRight', '2001');
+  });
+
+  it('should decrease the year when pressing left and yearsOrder is asc (default)', () => {
+    changeYear('ArrowLeft', '1999');
+  });
+
+  it('should decrease the year when pressing right and yearsOrder is desc', () => {
+    changeYear('ArrowRight', '1999', 'desc');
+  });
+
+  it('should increase the year when pressing left and yearsOrder is desc', () => {
+    changeYear('ArrowLeft', '2001', 'desc');
+  });
+
+  it('should decrease the year when pressing right and yearsOrder is asc (default) and theme is RTL', () => {
+    changeYear('ArrowRight', '1999', 'asc', 'rtl');
+  });
+
+  it('should increase the year when pressing left and yearsOrder is asc (default) and theme is RTL', () => {
+    changeYear('ArrowLeft', '2001', 'asc', 'rtl');
+  });
+
+  it('should increase the year when pressing right and yearsOrder is desc and theme is RTL', () => {
+    changeYear('ArrowRight', '2001', 'desc', 'rtl');
+  });
+
+  it('should decrease the year when pressing left and yearsOrder is desc and theme is RTL', () => {
+    changeYear('ArrowLeft', '1999', 'desc', 'rtl');
+  });
+});