RTL support for Keyboard accessibility

shahabyazdi · May 18, 2024 · 848174d · 848174d
1 parent d5afcec
commit 848174d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/changelog.md b/changelog.md
@@ -5,6 +5,7 @@
 - Better type support for TypeScript
 - MapDaysProps added to the index.d.ts [#288](https://github.com/shahabyazdi/react-multi-date-picker/issues/288)
 - Calling onYearChange after year change in fullYear mode [#277](https://github.com/shahabyazdi/react-multi-date-picker/issues/277)
+- RTL support for Keyboard accessibility
 
 # 4.5.0
 

diff --git a/src/shared/handleFocus.js b/src/shared/handleFocus.js
@@ -12,10 +12,12 @@ export default function handleFocus(e, object, { type = "day", format }) {
 
   const { currentTarget, key, code } = e;
   const skip = type === "day" ? 7 : 3;
+  const calendar = findCalendar(currentTarget);
+  const isRtl = calendar && calendar.classList.contains("rmdp-rtl");
 
   const numbers = {
-    ArrowRight: 1,
-    ArrowLeft: -1,
+    ArrowRight: isRtl ? -1 : 1,
+    ArrowLeft: isRtl ? 1 : -1,
     ArrowUp: -skip,
     ArrowDown: skip,
   };
@@ -48,8 +50,6 @@ export default function handleFocus(e, object, { type = "day", format }) {
     }
 
     function next() {
-      const calendar = findCalendar(currentTarget);
-
       if (type === "month") return findFocusable(calendar, [array[2]]);
 
       const button = findNode(