feat: added keyboard accessibility

1 files changed, 55 insertions, 15 deletions

diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index bf0540b..4c68f53 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -1,39 +1,79 @@
 import React, { useRef, useEffect } from "react";
 import styles from "./Modal.module.css";
 
-const Modal = ({ openModal, setOpenModal, onSuccessClick, onCancelClick }) => {
+const Modal = ({
+  openModal,
+  setOpenModal,
+  onSuccessClick,
+  onCancelClick,
+  textAreaRef,
+}) => {
   const modalRef = useRef(null);
 
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (modalRef.current && !modalRef.current.contains(event.target)) {
         setOpenModal(false);
+        if (textAreaRef.current) {
+          setTimeout(() => {
+            textAreaRef.current.focus();
+          }, 0);
+        }
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpenModal(false);
+        if (textAreaRef.current) {
+          setTimeout(() => {
+            textAreaRef.current.focus();
+          }, 0);
+        }
+      } else if (
+        (event.key.toLowerCase() === "y" ||
+          event.key.toLowerCase() === "enter") &&
+        openModal
+      ) {
+        onSuccessClick();
+        event.preventDefault();
+        setOpenModal(false);
+      } else if (event.key.toLowerCase() === "n" && openModal) {
+        onCancelClick();
+        setOpenModal(false);
       }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [setOpenModal]);
+  }, [openModal]);
 
   return (
-    <div className={`${styles.background} ${openModal && styles.active}`}>
-      <div ref={modalRef} className={styles.container}>
-        <button
-          className={styles.container__close}
-          onClick={() => setOpenModal(false)}
-        >
-          <span>&#10007;</span>
-        </button>
-        <p className={styles.container__title}>Encrypt content?</p>
-        <div className={styles.container__actions}>
-          <button onClick={onSuccessClick}>Yes</button>
-          <button onClick={onCancelClick}>No</button>
+    openModal && (
+      <div className={`${styles.background} ${openModal && styles.active}`}>
+        <div ref={modalRef} className={styles.container}>
+          <button
+            className={styles.container__close}
+            onClick={() => setOpenModal(false)}
+          >
+            <span>&#10007;</span>
+          </button>
+          <p className={styles.container__title}>
+            Encrypt content?{" "}
+            <span className={styles.container__title__span}>[Y/n]</span>
+          </p>
+          <div className={styles.container__actions}>
+            <button onClick={onSuccessClick}>Yes</button>
+            <button onClick={onCancelClick}>No</button>
+          </div>
         </div>
       </div>
-    </div>
+    )
   );
 };