fix(web): inert the collapsed sidebar so off-screen nav leaves the a11y tree (BUG-2282)#1011
Merged
Merged
Conversation
…1y tree (BUG-2282) The mobile sidebar drawer collapses via translateX + pointer-events:none but stayed in the accessibility tree and tab order, so a screen-reader virtual cursor and keyboard Tab still reached its off-screen nav links. Bind `inert` to the same !sidebarOpen condition that drives the collapse class + the existing pointer-events:none rule, so a collapsed drawer leaves both the a11y tree and the focus order — covering the mobile drawer and the latent desktop width:0 collapse. The re-open control lives in TopBar (outside the aside) so nothing is trapped; swipe-to-open is a window handler, unaffected. Claude-Session: https://claude.ai/code/session_01EZ6yr6pAUFb1uffan912ra
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
1 participant
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.
BUG-2282
The mobile sidebar drawer collapses via
transform: translateX(...)+pointer-events: none, but nothing removed it from the accessibility tree or tab order — so a screen-reader virtual cursor and keyboard Tab still reached its off-screen nav links.Fix
One attribute on
<aside class="sidebar">:inert={!uiStore.sidebarOpen}Bound to the same
!sidebarOpencondition that already drivesclass:collapsedand the.sidebar.collapsed { pointer-events: none }rule. A collapsed drawer now leaves both the a11y tree and the focus order — covering the mobile drawer and the latent desktopwidth:0collapse (same keyboard-focus gap). Plus an explanatory comment.Safe: the re-open control lives in
TopBar.svelte(toggleSidebar), outside the aside — nothing is trapped. Swipe-to-open is a<svelte:window>handler (not on the aside); the aside's own touch handlers only do swipe-to-close (open-state only).Verification
svelte-check: 0 errors.make install: clean.Playwright runtime verify (real browser, cookie session):
inert6-lens adversarial review (trap / gestures / Svelte-correctness / desktop-regression / a11y+e2e / timing): 6/6 OK, 0 confirmed defects. Confirmed
inertis in Svelte 5'sDOM_BOOLEAN_ATTRIBUTES(removed when false, never rendered asinert="false"), no e2e test focuses/clicks sidebar nav while collapsed, and the mobile-and-desktop condition is correct (a mobile-only guard would reintroduce the bug on desktop).Follow-up
UP-2285(low, keyboard) — optional focus handoff to the TopBar toggle on keyboard-driven collapse (currently focus drops to<body>, standardinertbehavior; not a regression).https://claude.ai/code/session_01EZ6yr6pAUFb1uffan912ra