cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(sidebar): make entire section header row clickable
All checks were successful
Build & Publish / publish (push) Successful in 2m1s
Details

Browse Source 
The toggle was only on the chevron button. Now the full row
(chevron + icon + label) triggers onToggle on click or Enter/Space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-02 21:59:47 +02:00
parent 9b8739b5d8
commit 50a1296a9d
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/design-system/layout/Sidebar/Sidebar.module.css
View File

@@ -215,6 +215,8 @@
gap: 2px; gap: 2px;
width: 100%; width: 100%;
padding: 8px 0 4px; padding: 8px 0 4px;
cursor: pointer;
user-select: none;
} }
.treeSectionChevronBtn { .treeSectionChevronBtn {

19
src/design-system/layout/Sidebar/Sidebar.tsx
View File

@@ -115,15 +115,18 @@ function SidebarSection({
return ( return (
<div className={`${styles.treeSection} ${active ? styles.treeSectionActive : ''} ${className ?? ''}`}> <div className={`${styles.treeSection} ${active ? styles.treeSectionActive : ''} ${className ?? ''}`}>
<div className={styles.treeSectionToggle}> <div
<button className={styles.treeSectionToggle}
className={styles.treeSectionChevronBtn} onClick={onToggle}
onClick={onToggle} role="button"
aria-expanded={open} tabIndex={0}
aria-label={open ? `Collapse ${label}` : `Expand ${label}`} 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} />} {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
</button> </span>
{icon && <span className={styles.sectionIcon}>{icon}</span>} {icon && <span className={styles.sectionIcon}>{icon}</span>}
<span className={styles.treeSectionLabel}>{label}</span> <span className={styles.treeSectionLabel}>{label}</span>
</div> </div>