feat: add keyboard shortcuts for nav sections

Author: wackerow

src/components/Nav/Menu/index.tsx

@@ -1,10 +1,10 @@
-import { AnimatePresence, motion } from "framer-motion"
+import { motion } from "framer-motion"
 import { Box, type BoxProps, Flex, Text } from "@chakra-ui/react"
 import * as NavigationMenu from "@radix-ui/react-navigation-menu"
 
 import { Button } from "@/components/Buttons"
 
-import { SECTION_LABELS } from "@/lib/constants"
+import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSections } from "../types"
 
@@ -35,7 +35,7 @@ const Menu = ({ sections, ...props }: NavMenuProps) => {
         onValueChange={handleSectionChange}
       >
         <NavigationMenu.List asChild>
-          <Flex as="ul" listStyleType="none">
+          <Flex id={MAIN_NAV_ID} as="ul" listStyleType="none">
             {SECTION_LABELS.map((sectionKey) => {
               const { label, items } = sections[sectionKey]
               const isActive = activeSection === sectionKey

src/components/Nav/Menu/useNavMenu.ts

@@ -1,5 +1,8 @@
 import { useState } from "react"
 import type { MotionProps } from "framer-motion"
+import { useEventListener } from "@chakra-ui/react"
+
+import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSectionKey, NavSections } from "../types"
 
@@ -11,6 +14,25 @@ export const useNavMenu = (sections: NavSections) => {
   const menuColors = useNavMenuColors()
   const [activeSection, setActiveSection] = useState<NavSectionKey | null>(null)
 
+  // Focus corresponding nav section when number keys pressed
+  useEventListener("keydown", (event) => {
+    if (!document || !event.key.match(/[1-9]/)) return
+    if (event.target instanceof HTMLInputElement) return
+    if (event.target instanceof HTMLTextAreaElement) return
+    if (event.target instanceof HTMLSelectElement) return
+
+    const sectionIdx = parseInt(event.key) - 1
+    if (sectionIdx >= SECTION_LABELS.length) return
+
+    const button = document.querySelector(
+      `#${MAIN_NAV_ID} li:nth-of-type(${sectionIdx + 1}) button`
+    )
+    if (!button) return
+
+    event.preventDefault()
+    ;(button as HTMLButtonElement).focus()
+  })
+
   const getEnglishSectionName = (
     activeSection: string
   ): NavSectionKey | null => {

src/lib/constants.ts

@@ -85,3 +85,5 @@ export const SECTION_LABELS: NavSectionKey[] = [
   "participate",
   "research",
 ]
+
+export const MAIN_NAV_ID = "main-navigation"