Mobile nav dropdown accessibility

src/components/IconLink.tsx

@@ -3,14 +3,16 @@
 import { Button, NavbarItem } from '@nextui-org/react';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
+import { RefCallback } from 'react';
 
 interface IconLinkProps {
   icon: React.ReactElement;
   text: string;
   href: string;
+  refFunction?: RefCallback<HTMLButtonElement>;
 }
 
-function IconLink({ icon, text, href }: IconLinkProps) {
+function IconLink({ icon, text, href, refFunction }: IconLinkProps) {
   const pathname = usePathname();
   return (
     <NavbarItem
@@ -35,6 +37,7 @@ function IconLink({ icon, text, href }: IconLinkProps) {
             ? 'active-state-nav gap-0 w-full justify-start'
             : 'iconLink bg-color-none gap-0 w-full justify-start'
         }
+        ref={refFunction ?? null}
         // className="flex text-gray-900 items-center active:bg-[#E9FFE5] active:text-green-700 focus:text-green-700 focus:bg-[#E9FFE5] hover:gray-100 bg-color-none hover:bg-gray-10"
       >
         <span className="body-md">{text}</span>

src/components/MobileNav.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
+
 import {
   Link,
   Navbar,
@@ -20,11 +22,61 @@ import Image from 'next/image';
 import React, { FC } from 'react';
 import IconLink from './IconLink';
 const MobileNav: FC = () => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuItemsRef = useRef<HTMLButtonElement[]>([]);
+
+  useEffect(() => {
+    const handleMenuExit = (event: KeyboardEvent) => {
+      if (!isMenuOpen) return;
+
+      const { key } = event;
+      if (key === 'Escape' || key === 'Tab') {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleMenuExit);
+
+    () => {
+      document.removeEventListener('keydown', handleMenuExit);
+    };
+  }, [isMenuOpen]);
+
+  useEffect(() => {
+    const handleArrowNavigation = (event: KeyboardEvent) => {
+      if (!isMenuOpen) return;
+
+      const { key } = event;
+      const currentIndex = menuItemsRef.current.findIndex(
+        (item) => item === document.activeElement
+      );
+      console.log(`Current index ${currentIndex}`);
+      console.log(menuItemsRef.current);
+
+      if (key === 'ArrowDown') {
+        event.preventDefault();
+        const nextIndex = (currentIndex + 1) % menuItemsRef.current.length;
+        menuItemsRef.current[nextIndex]?.focus();
+        console.log(document.activeElement);
+      } else if (key === 'ArrowUp') {
+        event.preventDefault();
+        const prevIndex =
+          (currentIndex - 1 + menuItemsRef.current.length) %
+          menuItemsRef.current.length;
+        menuItemsRef.current[prevIndex]?.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleArrowNavigation);
+    return () => {
+      document.removeEventListener('keydown', handleArrowNavigation);
+    };
+  }, [isMenuOpen]);
 
   return (
     <Navbar
       className="min-[850px]:hidden h-24 -mx-1"
+      isMenuOpen={isMenuOpen}
       onMenuOpenChange={setIsMenuOpen}
       as="div"
       maxWidth="full"
@@ -51,9 +103,7 @@ const MobileNav: FC = () => {
               <PiList className="h-6 w-6 linkIcon" /> Menu
             </>
           }
-        >
-          {' '}
-        </NavbarMenuToggle>
+        />
       </NavbarContent>
 
       {/* (181.1 (width of menu) + 48px offset padding = 235.1) - 12px */}
@@ -66,26 +116,41 @@ const MobileNav: FC = () => {
           icon={<PiBinoculars className="h-6 w-6" />}
           text="Find Properties"
           href="/find-properties"
+          refFunction={(node) => {
+            menuItemsRef.current[0] = node!;
+          }}
         />
         <IconLink
           icon={<PiKey className="h-6 w-6" />}
           text="Get Access"
           href="/get-access"
+          refFunction={(node) => {
+            menuItemsRef.current[1] = node!;
+          }}
         />
         <IconLink
           icon={<PiTree className="h-6 w-6" />}
           text="Transform"
           href="/transform-property"
+          refFunction={(node) => {
+            menuItemsRef.current[2] = node!;
+          }}
         />
         <IconLink
           icon={<PiInfo className="h-6 w-6" />}
           text="About"
           href="/about"
+          refFunction={(node) => {
+            menuItemsRef.current[3] = node!;
+          }}
         />
         <IconLink
           icon={<PiHeart className="h-6 w-6" />}
           text="Donate"
           href="/donate"
+          refFunction={(node) => {
+            menuItemsRef.current[4] = node!;
+          }}
         />
       </NavbarMenu>
     </Navbar>