From 1e3ba46e953f57b6948c3d57ba884011f4b20d26 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 15 May 2026 18:10:28 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20collapsible=20UI=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
- Added `aria-expanded` and `aria-controls` to the toggle button in the `CollapsibleSection` component (used heavily in the JS8Call ListeningPost).
- Used React's `useId()` hook to dynamically generate a unique ID for the content block to properly associate with `aria-controls`.
- Added missing keyboard focus states (`focus-visible:ring-1 focus-visible:ring-cyan-500 outline-none`) to the toggle button.
- Added `aria-hidden="true"` to purely decorative SVG icons within the button.
- Applied identical accessibility improvements to the "Manual Entry" toggle block in `KiwiNodeBrowser.tsx` (hardcoded ID since it is a single instance).

🎯 Why:
Screen reader users navigating custom accordion or collapsible blocks were previously unaware of the section's expanded/collapsed state or which content it controlled because the buttons lacked the semantic ARIA hooks (`aria-expanded` and `aria-controls`). Additionally, keyboard-only users lacked a clear visual indicator of which section was currently focused.

♿ Accessibility:
- Explicitly binds the toggle button to its content container via `aria-controls`.
- Exposes state via `aria-expanded`.
- Restores keyboard focus visibility.
- Hides decorative Chevrons from screen readers to reduce noise.

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

diff --git a/.jules/palette.md b/.jules/palette.md
index 3dce5527..5093a1c1 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.
+
+## 2025-05-15 - Added Missing ARIA Labels to Collapsible Sections
+**Learning:** In complex widget panels (like JS8Call `ListeningPost` and `KiwiNodeBrowser`), collapsible sections triggered by icon buttons or entire rows often lack proper ARIA semantics for expand/collapse states (`aria-expanded`, `aria-controls`), which leaves screen reader users unaware of whether the section is open or what content it toggles. Furthermore, non-semantic icons inside these buttons (like Chevrons) are sometimes not hidden from screen readers.
+**Action:** When implementing or fixing custom collapsible components, always pair the toggle button with `aria-expanded={isOpen}`, link it to the content container via `aria-controls="content-id"`, and ensure keyboard visibility with `focus-visible:ring-*`. Also, mark purely visual indicator icons with `aria-hidden="true"`.
diff --git a/frontend/src/components/js8call/KiwiNodeBrowser.tsx b/frontend/src/components/js8call/KiwiNodeBrowser.tsx
index d867a0ad..160ed654 100644
--- a/frontend/src/components/js8call/KiwiNodeBrowser.tsx
+++ b/frontend/src/components/js8call/KiwiNodeBrowser.tsx
@@ -600,18 +600,20 @@ export default function KiwiNodeBrowser({
       <div className="border-t border-slate-800">
         <button
           onClick={() => setShowManual(!showManual)}
-          className="w-full flex items-center gap-2 px-4 py-2 hover:bg-slate-800/40 transition-colors text-[10px] font-bold text-slate-500 uppercase tracking-widest"
+          aria-expanded={showManual}
+          aria-controls="manual-entry-content"
+          className="w-full flex items-center gap-2 px-4 py-2 hover:bg-slate-800/40 transition-colors text-[10px] font-bold text-slate-500 uppercase tracking-widest focus-visible:ring-1 focus-visible:ring-indigo-400 outline-none"
         >
           {showManual ? (
-            <ChevronDown className="w-3 h-3" />
+            <ChevronDown className="w-3 h-3" aria-hidden="true" />
           ) : (
-            <ChevronRight className="w-3 h-3" />
+            <ChevronRight className="w-3 h-3" aria-hidden="true" />
           )}
           Manual Entry — Private / Unlisted Nodes
         </button>
 
         {showManual && (
-          <div className="px-4 pb-4 space-y-3">
+          <div id="manual-entry-content" className="px-4 pb-4 space-y-3">
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1">
                 <label htmlFor="manual-host" className="text-[9px] uppercase tracking-tighter text-slate-600 font-bold ml-1">
diff --git a/frontend/src/components/js8call/ListeningPost.tsx b/frontend/src/components/js8call/ListeningPost.tsx
index 86efcb51..90189780 100644
--- a/frontend/src/components/js8call/ListeningPost.tsx
+++ b/frontend/src/components/js8call/ListeningPost.tsx
@@ -18,7 +18,7 @@ import {
   Zap,
   Lock,
 } from "lucide-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useId, useCallback, useEffect, useRef, useState } from "react";
 import { getToken } from "../../api/auth";
 import { useAuth } from "../../hooks/useAuth";
 import {
@@ -52,28 +52,31 @@ function CollapsibleSection({
   isOpen,
   onToggle,
 }: CollapsibleSectionProps) {
+  const contentId = useId();
   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 && (
-            <Icon className="w-3.5 h-3.5 text-slate-500 group-hover:text-cyan-400 transition-colors" />
+            <Icon className="w-3.5 h-3.5 text-slate-500 group-hover:text-cyan-400 transition-colors" aria-hidden="true" />
           )}
           <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest group-hover:text-slate-200">
             {title}
           </span>
         </div>
         {isOpen ? (
-          <ChevronDown className="w-3.5 h-3.5 text-slate-600" />
+          <ChevronDown className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
         ) : (
-          <ChevronRight className="w-3.5 h-3.5 text-slate-600" />
+          <ChevronRight className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
         )}
       </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>
       )}