fix(sidebar): make the sidebar resize handle keyboard-operable - #6193
Open
pedrofrxncx wants to merge 1 commit into
Open
fix(sidebar): make the sidebar resize handle keyboard-operable#6193pedrofrxncx wants to merge 1 commit into
pedrofrxncx wants to merge 1 commit into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The sidebar's resize handle (
SidebarResizeHandle) isrole="separator"but had notabIndexand noonKeyDown— 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 plusaria-valuenow/valuemin/valuemax, none of which were present.Changes:
use-sidebar-resize.ts: exposesminWidth,maxWidth, and a newadjustWidth(delta)setter (reusing the existingclamp/localStorage persistence), plus a smallSIDEBAR_RESIZE_KEYBOARD_STEPconstant.sidebar-resize-handle.tsx: addstabIndex={0}, a focus ring,aria-valuenow/min/max, and anonKeyDownhandler — 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 fromuseSidebarResize().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 unrelatedmustachemodule error confirmed present on main viagit stash, not touched by this change),bunx oxlinton 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: addstabIndex={0},aria-valuenow/min/max, a focus ring, andonKeyDown(ArrowLeft/Right ±16px, Home/End to min/max, Enter resets).useSidebarResize: exposesminWidth,maxWidth, andadjustWidth(delta); clamping and persistence are unchanged; exportsSIDEBAR_RESIZE_KEYBOARD_STEP=16.OrgShellLayout: wires the new props to the handle.SidebarResizeHandleelsewhere, passwidth,minWidth,maxWidth,onAdjustWidth, and optionallyonResetWidth.Written for commit 17f8f5a. Summary will update on new commits.