From 35b544d1425f934b01f120567661952f09bab4c4 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 16 May 2026 16:56:56 +0000
Subject: [PATCH] feat(ui): add aria-expanded and aria-controls to
 CollapsibleSection in ListeningPost

- Add `aria-expanded` and `aria-controls` to the toggle button
- Generate a unique ID based on the title to link button and content
- Add `focus-visible` ring styles for keyboard navigation

Co-authored-by: d3mocide <136547209+d3mocide@users.noreply.github.com>
---
 .jules/palette.md                                 | 4 ++++
 frontend/src/components/js8call/ListeningPost.tsx | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 3dce5527..6e5774ea 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -105,3 +105,7 @@
 ## 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-20 - Ensure Accordion Components Include ARIA Attributes
+**Learning:** Found an accordion header (`CollapsibleSection` in `ListeningPost.tsx`) lacking the `aria-expanded` state attribute and `aria-controls` link to its expandable content. Without these, screen reader users cannot tell whether the section is open or closed, nor programmatically follow the link to the content.
+**Action:** When creating or modifying collapsible widgets, always ensure the toggle button receives `aria-expanded={isOpen}` and `aria-controls={contentId}`, with the expanded content container holding the matching `id={contentId}`.
diff --git a/frontend/src/components/js8call/ListeningPost.tsx b/frontend/src/components/js8call/ListeningPost.tsx
index 86efcb51..bc61705d 100644
--- a/frontend/src/components/js8call/ListeningPost.tsx
+++ b/frontend/src/components/js8call/ListeningPost.tsx
@@ -52,11 +52,15 @@ function CollapsibleSection({
   isOpen,
   onToggle,
 }: CollapsibleSectionProps) {
+  const contentId = `section-${title.replace(/\s+/g, '-').toLowerCase()}`;
+
   return (
     <div className="border-b border-[#1a2b36] last:border-0">
       <button
         onClick={onToggle}
-        className="w-full px-5 py-4 flex items-center justify-between hover:bg-white/5 transition-colors group"
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        className="w-full px-5 py-4 flex items-center justify-between hover:bg-white/5 transition-colors group focus-visible:ring-1 focus-visible:ring-cyan-500 outline-none"
       >
         <div className="flex items-center gap-2">
           {Icon && (
@@ -73,7 +77,7 @@ function CollapsibleSection({
         )}
       </button>
       {isOpen && (
-        <div className="px-5 pb-5 space-y-5 animate-in fade-in slide-in-from-top-1 duration-200">
+        <div id={contentId} className="px-5 pb-5 space-y-5 animate-in fade-in slide-in-from-top-1 duration-200">
           {children}
         </div>
       )}