🎨 Palette: Add aria-expanded and keyboard navigation to accordion panels

.jules/palette.md

@@ -105,6 +105,11 @@
 ## 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.
+
 ## 2026-05-05 - Prevent disabled attribute from blocking tooltips
 **Learning:** Native `disabled` attributes on buttons often swallow pointer events, preventing `title` tooltips from displaying in many browsers. This means users receive no hover feedback explaining *why* a button is locked or disabled.
 **Action:** Use `aria-disabled="true"` combined with visual styling (`cursor-not-allowed`, opacity) and explicit event handler guards (e.g., `if (isDisabled) return;`) instead of the native `disabled` attribute to ensure tooltips and hover states remain accessible.

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"
               >

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'} />