Commit be2fd2b
fix(web-ui): SplitPane a11y, logic bugs, and test coverage (#518)
* fix(web-ui): SplitPane a11y, logic bugs, and test coverage
- Remove aria-hidden from divider; add role=separator + aria-orientation
- Add type="button" to collapse buttons (prevent form submission)
- Add keyboard resize via ArrowLeft/ArrowRight (WCAG 2.1.1)
- Fix lastNonCollapsed corruption when cross-collapsing panes
- Don't write 0/100 to localStorage on collapse (prevents reload drift)
- Clamp readStorage to valid expanded range [min, 100-min]
- Return null until isMobile resolves (prevent hydration flash)
- Expand tests: 29 tests covering all 8 review findings
* fix(web-ui): address CodeRabbit review on SplitPane
- Extract commitExpandedSplit helper shared by drag and keyboard paths
- Fix aria-valuemin/aria-valuemax to reflect actual collapsed state range
* fix(web-ui): guard keyboard resize at collapsed sentinels (0/100)
* fix(web-ui): SplitPane CodeRabbit round 3 — clamp, click guard, ARIA
- readStorage: clamp fallback and stored values into [min,max]; reject
collapsed sentinels (0/100) explicitly via Number.isFinite path
- onDividerMouseDown: reset livePercent to splitPct and dragMoved=false
- onMouseUp: only call commitExpandedSplit when dragMoved — plain clicks
on divider no longer reopen collapsed panes
- ARIA range: use splitPct===0/===100 (not <=/>= minPanePercent)
- Tests: stale-width clamp (10→15, 90→85), invalid defaultSplit clamp,
plain-click no-op on collapsed pane (37 tests total)
* Update web-ui/src/components/sessions/SplitPane.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* fix(web-ui): guard outward drags from collapsed edges as no-ops
Moves dragged from a fully-collapsed edge (splitPct 0 or 100) that keep
the pointer at or beyond the same edge no longer set dragMoved or update
pane widths; only inward movement that crosses back inside the container
exits the collapsed state and triggers commitExpandedSplit.
Adds four regression tests covering both left- and right-collapsed
outward and inward drag paths.
* fix(web-ui): hoist collapse buttons out of role=separator (WAI-ARIA 1.2)
A focusable separator is a widget and must not contain interactive
descendants. Wraps the resize handle and both collapse buttons in a
sibling-level track div; role="separator" now has no children so AT
reaches all three focusable elements independently.
Visual output is unchanged — buttons remain absolutely positioned over
the same pixel area. Updates the mobile-hidden test to target the track
instead of the separator.
---------
Co-authored-by: Test User <test@example.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>1 parent ecb2fb7 commit be2fd2b
2 files changed
Lines changed: 477 additions & 149 deletions
0 commit comments