From 1ef59179328c0642c7c189aaf03a3a44d211204a Mon Sep 17 00:00:00 2001
From: Isaac Sanchez-Hawkins <266845420+isanchez404@users.noreply.github.com>
Date: Fri, 8 May 2026 12:50:53 -0400
Subject: [PATCH] fix(ui): expose sidebar group collapse state (#1163)

* fix(ui): expose sidebar group collapse state

* fix(ui): keep sidebar group panel mounted

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>
---
 .../components/sections/shared/SidebarGroup.tsx   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/sections/shared/SidebarGroup.tsx b/packages/ui/src/components/sections/shared/SidebarGroup.tsx
index 84c5c202..1d14f7db 100644
--- a/packages/ui/src/components/sections/shared/SidebarGroup.tsx
+++ b/packages/ui/src/components/sections/shared/SidebarGroup.tsx
@@ -30,6 +30,7 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
   children,
 }) => {
   const key = getStorageKey(storageKey, label);
+  const contentId = React.useId();
 
   const [expanded, setExpanded] = useState<boolean>(() => {
     try {
@@ -54,6 +55,8 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-controls={contentId}
         className={cn(
           'flex w-full items-center gap-1 rounded-md px-2 py-1 text-left',
           'text-xs font-semibold uppercase tracking-wide text-muted-foreground',
@@ -71,11 +74,13 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
         <span className="ml-1 tabular-nums opacity-60">{count}</span>
       </button>
 
-      {expanded && (
-        <div className="mt-0.5 space-y-0.5 ml-2 pl-3 border-l-2 border-[var(--interactive-border)]">
-          {children}
-        </div>
-      )}
+      <div
+        id={contentId}
+        hidden={!expanded}
+        className="mt-0.5 space-y-0.5 ml-2 pl-3 border-l-2 border-[var(--interactive-border)]"
+      >
+        {children}
+      </div>
     </div>
   );
 };