From b6296060252965b3061b668f35fc490cded7410d Mon Sep 17 00:00:00 2001
From: madara88645 <163588475+madara88645@users.noreply.github.com>
Date: Tue, 17 Mar 2026 21:43:40 +0000
Subject: [PATCH] Add aria-expanded to collapsible buttons for screen readers

Added the `aria-expanded` attribute to three different accordion/disclosure
toggle buttons across the Next.js frontend application (in `BenchmarkResults`
and `ExportPanel` components) to improve accessibility by communicating the
expanded/collapsed state of the panels to screen readers.
---
 web/app/agent-generator/components/ExportPanel.tsx  | 1 +
 web/app/components/BenchmarkResults.tsx             | 1 +
 web/app/skills-generator/components/ExportPanel.tsx | 1 +
 3 files changed, 3 insertions(+)

diff --git a/web/app/agent-generator/components/ExportPanel.tsx b/web/app/agent-generator/components/ExportPanel.tsx
index 5dcd858..b56892d 100644
--- a/web/app/agent-generator/components/ExportPanel.tsx
+++ b/web/app/agent-generator/components/ExportPanel.tsx
@@ -125,6 +125,7 @@ export default function ExportPanel({ systemPrompt, isMultiAgent }: ExportPanelP
       {/* Toggle header */}
       <button
         onClick={handleToggle}
+        aria-expanded={isOpen}
         className="w-full flex items-center justify-between px-2 py-1 group"
       >
         <div className="flex items-center gap-2">
diff --git a/web/app/components/BenchmarkResults.tsx b/web/app/components/BenchmarkResults.tsx
index 78f3281..a04746f 100644
--- a/web/app/components/BenchmarkResults.tsx
+++ b/web/app/components/BenchmarkResults.tsx
@@ -80,6 +80,7 @@ export default function BenchmarkResults({ data }: BenchmarkResultsProps) {
             <div className="border-b border-white/5">
                 <button
                     onClick={() => setPromptOpen(!promptOpen)}
+                    aria-expanded={promptOpen}
                     className="w-full px-5 py-3 flex items-center justify-between text-left hover:bg-white/[0.02] transition-colors group"
                 >
                     <div className="flex items-center gap-2">
diff --git a/web/app/skills-generator/components/ExportPanel.tsx b/web/app/skills-generator/components/ExportPanel.tsx
index e4e5cab..3aedaa9 100644
--- a/web/app/skills-generator/components/ExportPanel.tsx
+++ b/web/app/skills-generator/components/ExportPanel.tsx
@@ -124,6 +124,7 @@ export default function SkillExportPanel({ skillDefinition }: ExportPanelProps)
       {/* Toggle header */}
       <button
         onClick={handleToggle}
+        aria-expanded={isOpen}
         className="w-full flex items-center justify-between px-2 py-1 group"
       >
         <div className="flex items-center gap-2">