From dd2674a1d919901a7b80ba29d7fecb156c552c54 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 6 May 2022 11:52:43 +0300
Subject: [PATCH] ally: making categories drop-down & project cards keyboard
 navigatable

---
 src/Components/Navbar/NavDesktop.tsx               | 14 +++++++++-----
 .../Components/ProjectCardMini/ProjectCardMini.tsx |  7 ++++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 1f51aeb..5973967 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -52,7 +52,6 @@ export default function NavDesktop() {
     };
 
 
-
     return (<nav className="bg-white w-full flex fixed h-[118px] top-0 left-0 py-36 px-32 items-center z-[2010]">
         <a href="https://bolt.fun/">
             <h2 className="text-h5 font-bold mr-40 lg:mr-64">
@@ -70,11 +69,16 @@ export default function NavDesktop() {
             )}
             <li
                 ref={categoriesRef}
-                className="relative cursor-pointer" onClick={() => toggleCategories(!categoriesOpen)}>
-                <p className='text-body4 hover:text-primary-600'>
+                className="relative"
+            >
+                <button
+                    onClick={() => toggleCategories(!categoriesOpen)}
+                    onKeyDown={e => (e.key !== 'Escape') || toggleCategories(false)}
+                    className='text-body4 hover:text-primary-600 cursor-pointer'
+                >
                     <IoExtensionPuzzle className={`text-body2  inline-block mr-8 text-primary-600`} />
                     <span className="align-middle">Categories</span>
-                </p>
+                </button>
                 {<motion.div
                     initial={{ opacity: 0, y: 200, display: 'none' }}
                     animate={categoriesOpen ? {
@@ -94,7 +98,7 @@ export default function NavDesktop() {
                         }
                     }}
                     className="absolute top-full left-0 w-[256px] bg-white border border-primary-50 rounded-8 shadow-3xl">
-                    <CategoriesList />
+                    <CategoriesList onClick={() => toggleCategories(false)} />
                 </motion.div>}
             </li>
         </ul>
diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index 1e01fcf..761d27b 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -10,7 +10,12 @@ interface Props {
 export default function ProjectCardMini({ project, onClick }: Props) {
 
     return (
-        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(project.id)}>
+        <div
+            className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
+            onClick={() => onClick(project.id)}
+            onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
+            tabIndex={0}
+        >
             <img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
             <div className="justify-around items-start min-w-0">
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>