diff --git a/src/design-system/layout/Sidebar/Sidebar.module.css b/src/design-system/layout/Sidebar/Sidebar.module.css
index 12c5bef..c73635a 100644
--- a/src/design-system/layout/Sidebar/Sidebar.module.css
+++ b/src/design-system/layout/Sidebar/Sidebar.module.css
@@ -215,6 +215,8 @@
   gap: 2px;
   width: 100%;
   padding: 8px 0 4px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .treeSectionChevronBtn {
diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index e9e1089..8c5080b 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -115,15 +115,18 @@ function SidebarSection({
 
   return (
     <div className={`${styles.treeSection} ${active ? styles.treeSectionActive : ''} ${className ?? ''}`}>
-      <div className={styles.treeSectionToggle}>
-        <button
-          className={styles.treeSectionChevronBtn}
-          onClick={onToggle}
-          aria-expanded={open}
-          aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
-        >
+      <div
+        className={styles.treeSectionToggle}
+        onClick={onToggle}
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() } }}
+      >
+        <span className={styles.treeSectionChevronBtn} aria-hidden="true">
           {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        </button>
+        </span>
         {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>