From 297c54ee9d71d621d6fac871eda63c6f48b8e12f Mon Sep 17 00:00:00 2001
From: huazhuang80-star <295584745+huazhuang80-star@users.noreply.github.com>
Date: Sun, 21 Jun 2026 23:07:36 +0800
Subject: [PATCH] Improve FAQ accordion accessibility

---
 components/landing/faq.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx
index 1a27570..19eee57 100644
--- a/components/landing/faq.tsx
+++ b/components/landing/faq.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { Reveal } from "@/components/landing/reveal";
 import { SectionLabel } from "@/components/landing/section-label";
@@ -9,6 +9,7 @@ import { FAQ_CATEGORIES, FAQ_ITEMS, type FaqCategory } from "@/lib/faq";
 import { cn } from "@/lib/utils";
 
 export function Faq() {
+  const faqIdPrefix = useId();
   const [category, setCategory] = useState<FaqCategory>("about");
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
@@ -37,9 +38,10 @@ export function Faq() {
               <button
                 key={id}
                 type="button"
+                aria-pressed={category === id}
                 onClick={() => selectCategory(id)}
                 className={cn(
-                  "px-4 py-2 text-[10px] font-bold uppercase tracking-zk border transition-colors zk-badge",
+                  "px-4 py-2 text-[10px] font-bold uppercase tracking-zk border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black zk-badge",
                   category === id
                     ? "border-white/30 bg-white/10 text-white"
                     : "border-white/10 bg-transparent text-white/40 hover:text-white/70 hover:border-white/20"
@@ -53,20 +55,27 @@ export function Faq() {
           <div className="max-w-3xl mx-auto border border-white/[0.08] bg-[#0a0a0a]/60">
             {items.map(({ question, answer }, i) => {
               const isOpen = openIndex === i;
+              const buttonId = `${faqIdPrefix}-${category}-${i}-trigger`;
+              const panelId = `${faqIdPrefix}-${category}-${i}-panel`;
+
               return (
                 <div
                   key={question}
                   className="border-b border-white/[0.06] last:border-0"
                 >
                   <button
+                    id={buttonId}
                     type="button"
+                    aria-expanded={isOpen}
+                    aria-controls={panelId}
                     onClick={() => setOpenIndex(isOpen ? null : i)}
-                    className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left hover:bg-white/[0.02] transition-colors"
+                    className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left hover:bg-white/[0.02] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/50"
                   >
                     <span className="text-sm font-bold tracking-wide text-white/90">
                       {question}
                     </span>
                     <ChevronDown
+                      aria-hidden="true"
                       className={cn(
                         "w-4 h-4 shrink-0 text-white/40 transition-transform",
                         isOpen && "rotate-180"
@@ -74,6 +83,10 @@ export function Faq() {
                     />
                   </button>
                   <div
+                    id={panelId}
+                    role="region"
+                    aria-labelledby={buttonId}
+                    aria-hidden={!isOpen}
                     className={cn(
                       "overflow-hidden transition-all duration-300",
                       isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"