From 4fa6bbf82ed680491a4612403f3b67e7d89dff53 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:21:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20WikiCollaps?=
 =?UTF-8?q?ible=20accessibility=20with=20useId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
Updated the WikiCollapsible component to use React's useId hook for generating unique IDs and mapped them correctly to aria-controls and aria-expanded attributes.

🎯 Why:
Custom interactive widgets often lack proper accessibility context for screen readers. Using useId ensures that every instance of a collapsible element has a unique ID, creating a direct and accurate relationship between the toggle button and its content container.

📸 Before/After:
No visual change, but structural accessibility is improved.

♿ Accessibility:
- Added unique ID generation using useId
- Added aria-expanded to indicate toggle state
- Added aria-controls mapping the toggle to the content container
- Added dynamic aria-label indicating the "Show/Hide" action on the specific title

Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>
---
 .jules/palette.md                        | 3 +++
 src/components/wiki/wiki-collapsible.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..2f4ae0b
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-04-29 - Missing ID Mapping in Interactive Widgets
+**Learning:** Custom interactive widgets (like collapsibles and tabs) across the codebase often miss `aria-controls` mapping because generating unique IDs manually is cumbersome.
+**Action:** Use React's `useId` hook consistently in these components to generate unique IDs and map `aria-controls` to the content containers and `aria-expanded` attributes on toggle buttons, improving screen reader context.
diff --git a/src/components/wiki/wiki-collapsible.tsx b/src/components/wiki/wiki-collapsible.tsx
index 5284dd8..f507721 100644
--- a/src/components/wiki/wiki-collapsible.tsx
+++ b/src/components/wiki/wiki-collapsible.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useId } from "react";
 
 interface WikiCollapsibleProps {
   title: string;
@@ -14,6 +14,7 @@ export function WikiCollapsible({
   defaultOpen = true,
 }: WikiCollapsibleProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const contentId = useId();
 
   return (
     <div className="border border-wiki-border-light bg-wiki-offwhite">
@@ -22,11 +23,14 @@ export function WikiCollapsible({
         <button
           onClick={() => setIsOpen(!isOpen)}
           className="text-wiki-link text-sm hover:underline"
+          aria-expanded={isOpen}
+          aria-controls={contentId}
+          aria-label={`${isOpen ? "Hide" : "Show"} ${title}`}
         >
           [{isOpen ? "hide" : "show"}]
         </button>
       </div>
-      {isOpen && <div className="px-4 py-3">{children}</div>}
+      {isOpen && <div id={contentId} className="px-4 py-3">{children}</div>}
     </div>
   );
 }