From 215713494a99569370b868627244d814db01657a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 May 2026 18:02:54 +0000
Subject: [PATCH] fix: add aria-expanded and keyboard interaction to
 interactive elements

Co-authored-by: d3mocide <136547209+d3mocide@users.noreply.github.com>
---
 .jules/palette.md                                  |  3 +++
 frontend/src/components/widgets/AIAnalystPanel.tsx |  1 +
 frontend/src/components/widgets/JS8Widget.tsx      | 11 ++++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 3dce5527..24e85710 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -105,3 +105,6 @@
 ## 2025-04-24 - Interactive Element Keyboard Accessibility
 **Learning:** Found multiple interactive `<button>` elements in user-facing components (`UserManagementPanel`, `UserMenuWidget`) that lacked keyboard focus indicators. This makes navigation via keyboard difficult for users relying on alternative inputs.
 **Action:** When creating or maintaining new buttons, always append `focus-visible:ring-1 focus-visible:ring-[color] outline-none` to ensure standard keyboard accessibility across the UI.
+## 2024-05-18 - Accordion Header Accessibility
+**Learning:** Found an accordion header using a basic `div` with an `onClick` handler but lacking keyboard interaction and state announcement. Converting it to a real `<button>` risked layout breakages from browser defaults.
+**Action:** Used `role="button"`, `tabIndex={0}`, `aria-expanded`, an explicit `onKeyDown` handler (Space + Enter), and `focus-visible` ring classes to safely enhance the `div` into an accessible interactive element without disrupting styles.
diff --git a/frontend/src/components/widgets/AIAnalystPanel.tsx b/frontend/src/components/widgets/AIAnalystPanel.tsx
index 45eb58db..49cc9060 100644
--- a/frontend/src/components/widgets/AIAnalystPanel.tsx
+++ b/frontend/src/components/widgets/AIAnalystPanel.tsx
@@ -229,6 +229,7 @@ export const AIAnalystPanel: React.FC<AIAnalystPanelProps> = ({
             {isAdmin && (
               <button
                 onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+                aria-expanded={isSettingsOpen}
                 className={`p-1.5 rounded-sm transition-all ${isSettingsOpen ? 'bg-white/20 text-white shadow-[0_0_10px_rgba(255,255,255,0.2)]' : 'hover:bg-white/10 text-white/40 hover:text-white/80'}`}
                 title="AI Engine Settings"
               >
diff --git a/frontend/src/components/widgets/JS8Widget.tsx b/frontend/src/components/widgets/JS8Widget.tsx
index 96ce3486..e97409e1 100644
--- a/frontend/src/components/widgets/JS8Widget.tsx
+++ b/frontend/src/components/widgets/JS8Widget.tsx
@@ -113,8 +113,17 @@ export const JS8Widget: React.FC<JS8WidgetProps> = ({
     <div className="font-mono overflow-visible widget-panel">
       {/* Header */}
       <div 
-        className="flex items-center justify-between px-3 py-2 bg-white/5 border-b border-white/10 cursor-pointer transition-colors group"
+        role="button"
+        tabIndex={0}
+        aria-expanded={!collapsed}
+        className="flex items-center justify-between px-3 py-2 bg-white/5 border-b border-white/10 cursor-pointer transition-colors group focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:outline-none"
         onClick={() => setCollapsed((v) => !v)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setCollapsed((v) => !v);
+          }
+        }}
       >
         <div className="flex items-center gap-2 transition-opacity">
           <Radio size={14} className={connected ? 'text-purple-400' : 'text-slate-600'} />