diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..115cbfc
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2026-04-30 - Accessible Interactive Collapsible using React useId
+**Learning:** For accessible interactive components like collapsibles, custom DOM ID generation can be problematic due to component re-use and SSR mismatches. React's `useId` provides collision-free unique IDs crucial for properly linking interactive elements like buttons via `aria-controls` to the content they control.
+**Action:** When creating accessible widgets (tabs, dialogs, collapsibles), standardize on React's `useId` hook to generate unique IDs and pair them with `aria-controls` mapping to ensure screen readers provide correct structural context, maintaining accessibility without risking DOM ID collisions across instances.
diff --git a/src/components/wiki/wiki-collapsible.tsx b/src/components/wiki/wiki-collapsible.tsx
index 5284dd8..d51d9a7 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,13 @@ export function WikiCollapsible({
         <button
           onClick={() => setIsOpen(!isOpen)}
           className="text-wiki-link text-sm hover:underline"
+          aria-expanded={isOpen}
+          aria-controls={contentId}
         >
           [{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>
   );
 }