Skip to content

fix(sidebar): make the sidebar resize handle keyboard-operable - #6193

Open
pedrofrxncx wants to merge 1 commit into
mainfrom
fix/sidebar-resize-keyboard-w2
Open

fix(sidebar): make the sidebar resize handle keyboard-operable#6193
pedrofrxncx wants to merge 1 commit into
mainfrom
fix/sidebar-resize-keyboard-w2

Conversation

@pedrofrxncx

@pedrofrxncx pedrofrxncx commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator

The sidebar's resize handle (SidebarResizeHandle) is role="separator" but had no tabIndex and no onKeyDown — a keyboard-only user had no way to resize the sidebar at all, only drag it with a mouse. This is a real accessibility gap: WAI-ARIA's separator pattern for a moveable divider expects it to be focusable and support arrow-key adjustment plus aria-valuenow/valuemin/valuemax, none of which were present.

Changes:

  • use-sidebar-resize.ts: exposes minWidth, maxWidth, and a new adjustWidth(delta) setter (reusing the existing clamp/localStorage persistence), plus a small SIDEBAR_RESIZE_KEYBOARD_STEP constant.
  • sidebar-resize-handle.tsx: adds tabIndex={0}, a focus ring, aria-valuenow/min/max, and an onKeyDown handler — ArrowLeft/ArrowRight step the width, Home/End jump to min/max, Enter resets to default (mirrors the existing double-click reset).
  • org-shell-layout/index.tsx: wires the new props through from useSidebarResize().

No behavior change for existing mouse/touch drag-resize or double-click-reset; this only adds a previously-missing keyboard path.

To confirm: focus the resize handle (desktop, expanded sidebar) with Tab and use the arrow keys — the sidebar width should change; Home/End should snap to min/max; Enter should reset to the default width.

Verified locally: bun run fmt, cd apps/web && bunx tsc --noEmit (one pre-existing unrelated mustache module error confirmed present on main via git stash, not touched by this change), bunx oxlint on all three changed files (0 warnings/errors). No test added — this is a pure UI interaction/accessibility change with no trust boundary; full CI covers the rest.


Summary by cubic

Make the sidebar resize handle keyboard-operable to meet the WAI-ARIA separator pattern and close an accessibility gap. Before: the handle was not focusable and only worked with mouse drag. Now: it is focusable and supports Arrow/Home/End keys and Enter to reset; mouse/touch drag and double-click reset are unchanged.

Review notes

  • SidebarResizeHandle: adds tabIndex={0}, aria-valuenow/min/max, a focus ring, and onKeyDown (ArrowLeft/Right ±16px, Home/End to min/max, Enter resets).
  • useSidebarResize: exposes minWidth, maxWidth, and adjustWidth(delta); clamping and persistence are unchanged; exports SIDEBAR_RESIZE_KEYBOARD_STEP=16.
  • OrgShellLayout: wires the new props to the handle.
  • Migration: if you render SidebarResizeHandle elsewhere, pass width, minWidth, maxWidth, onAdjustWidth, and optionally onResetWidth.

Written for commit 17f8f5a. Summary will update on new commits.

Review in cubic

The resize handle is role=separator but wasn't focusable and had no
keyboard handler — a keyboard-only user could never resize the sidebar,
only drag it with a mouse. Add tabIndex, arrow-key/Home/End resizing,
Enter to reset, and the aria-valuenow/min/max the APG separator pattern
expects.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant