fixes:keyboard-navigation-8887' (#9006)

packages/features/schedules/components/Schedule.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import type {
   ArrayPath,
   Control,
@@ -382,6 +382,38 @@ const CopyTimes = ({
 }) => {
   const [selected, setSelected] = useState<number[]>([]);
   const { i18n, t } = useLocale();
+  const itteratablesByKeyRef = useRef<(HTMLInputElement | HTMLButtonElement)[]>([]);
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const itteratables = itteratablesByKeyRef.current;
+    const isActionRequired =
+      event.key === "Tab" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter";
+    if (!isActionRequired || !itteratables.length) return;
+    event.preventDefault();
+    const currentFocused = document.activeElement as HTMLInputElement | HTMLButtonElement;
+    let currentIndex = itteratables.findIndex((checkbox) => checkbox === currentFocused);
+    if (event.key === "Enter") {
+      if (currentIndex === -1) return;
+      currentFocused.click();
+      return;
+    }
+    if (currentIndex === -1) {
+      itteratables[0].focus();
+    } else {
+      // Move focus based on the arrow key pressed
+      if (event.key === "ArrowUp") {
+        currentIndex = (currentIndex - 1 + itteratables.length) % itteratables.length;
+      } else if (event.key === "ArrowDown" || event.key === "Tab") {
+        currentIndex = (currentIndex + 1) % itteratables.length;
+      }
+      itteratables[currentIndex].focus();
+    }
+  };
 
   return (
     <div className="space-y-2 py-2">
@@ -402,6 +434,11 @@ const CopyTimes = ({
                     setSelected([]);
                   }
                 }}
+                ref={(ref) => {
+                  if (ref) {
+                    itteratablesByKeyRef.current.push(ref as HTMLInputElement);
+                  }
+                }}
               />
             </label>
           </li>
@@ -423,6 +460,12 @@ const CopyTimes = ({
                         setSelected(selected.filter((item) => item !== weekdayIndex));
                       }
                     }}
+                    ref={(ref) => {
+                      if (ref && disabled !== weekdayIndex) {
+                        //we don't need to iterate over disabled elements
+                        itteratablesByKeyRef.current.push(ref as HTMLInputElement);
+                      }
+                    }}
                   />
                 </label>
               </li>
@@ -432,10 +475,24 @@ const CopyTimes = ({
       </div>
       <hr className="border-subtle" />
       <div className="space-x-2 px-2 rtl:space-x-reverse">
-        <Button color="minimal" onClick={() => onCancel()}>
+        <Button
+          color="minimal"
+          onClick={() => onCancel()}
+          ref={(ref) => {
+            if (ref) {
+              itteratablesByKeyRef.current.push(ref as HTMLButtonElement);
+            }
+          }}>
           {t("cancel")}
         </Button>
-        <Button color="primary" onClick={() => onClick(selected)}>
+        <Button
+          color="primary"
+          onClick={() => onClick(selected)}
+          ref={(ref) => {
+            if (ref) {
+              itteratablesByKeyRef.current.push(ref as HTMLButtonElement);
+            }
+          }}>
           {t("apply")}
         </Button>
       </div>