diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx index 1a27570..4dc5502 100644 --- a/components/landing/faq.tsx +++ b/components/landing/faq.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { type KeyboardEvent, useRef, useState } from "react"; import { ChevronDown } from "lucide-react"; import { Reveal } from "@/components/landing/reveal"; import { SectionLabel } from "@/components/landing/section-label"; @@ -11,12 +11,43 @@ import { cn } from "@/lib/utils"; export function Faq() { const [category, setCategory] = useState("about"); const [openIndex, setOpenIndex] = useState(0); + const itemButtonRefs = useRef>([]); const items = FAQ_ITEMS[category]; function selectCategory(id: FaqCategory) { setCategory(id); setOpenIndex(0); + itemButtonRefs.current = []; + } + + function focusQuestion(index: number) { + itemButtonRefs.current[index]?.focus(); + } + + function handleQuestionKeyDown( + event: KeyboardEvent, + index: number + ) { + if (event.key === "ArrowDown") { + event.preventDefault(); + focusQuestion((index + 1) % items.length); + } + + if (event.key === "ArrowUp") { + event.preventDefault(); + focusQuestion((index - 1 + items.length) % items.length); + } + + if (event.key === "Home") { + event.preventDefault(); + focusQuestion(0); + } + + if (event.key === "End") { + event.preventDefault(); + focusQuestion(items.length - 1); + } } return ( @@ -36,10 +67,11 @@ export function Faq() { {FAQ_CATEGORIES.map(({ id, label }) => (