fix: a11y violation

Author: dougfabris

packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss

@@ -121,7 +121,7 @@ $sidebar-color-stroke-extra-light: theme(
 
     &__bar:hover &__menu-wrapper,
     &__bar:focus-within &__menu-wrapper,
-    &__bar:has([aria-expanded='true']) &__menu-wrapper {
+    &__bar:has(&__menu-wrapper [aria-expanded='true']) &__menu-wrapper {
       width: lengths.size(20);
 
       opacity: 1;
@@ -148,8 +148,32 @@ $sidebar-color-stroke-extra-light: theme(
     }
   }
 
-  &-collapse-group__panel--expanded {
-    padding-block: lengths.padding(none);
+  &-collapse-group {
+    &__bar-button {
+      display: flex;
+      align-items: center;
+
+      flex: 1 1 0;
+
+      min-width: 0;
+
+      text-align: start;
+
+      column-gap: lengths.padding(4);
+
+      &[tabindex] {
+        @include clickable;
+        @include focus-state($shadow: false);
+      }
+    }
+
+    &__bar:has(&__bar-button:hover) {
+      background-color: colors.surface(tint);
+    }
+
+    &__panel--expanded {
+      padding-block: lengths.padding(none);
+    }
   }
 
   &-accordion-item {

packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx

@@ -20,6 +20,7 @@ export const SidebarGroupTitle = ({
   menu,
   barProps,
   expanded,
+  role,
   ...props
 }: SidebarGroupTitleProps) => (
   <div
@@ -29,19 +30,24 @@ export const SidebarGroupTitle = ({
     ]
       .filter(Boolean)
       .join(' ')}
-    {...barProps}
     {...props}
   >
-    {expanded !== undefined && <Chevron size='x20' right={!expanded} />}
-    {title && (
-      <h4
-        className='rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title'
-        id={titleId}
-      >
-        {title}
-      </h4>
-    )}
-    {!expanded && badge && badge}
+    <div
+      className='rcx-box rcx-sidebar-v2-collapse-group__bar-button'
+      role={role}
+      {...barProps}
+    >
+      {expanded !== undefined && <Chevron size='x20' right={!expanded} />}
+      {title && (
+        <h4
+          className='rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title'
+          id={titleId}
+        >
+          {title}
+        </h4>
+      )}
+      {!expanded && badge && badge}
+    </div>
     {menu && <SidebarCollapseGroupMenu>{menu}</SidebarCollapseGroupMenu>}
   </div>
 );