Repository navigation
fix(ui): make closed sidebars inert and return focus to their toggle - #248
Merged
Merged
Conversation
A collapsed desktop left sidebar kept a visible zero-width grid track, so its controls stayed focusable and exposed to assistive technology. Why: packages/ui/src/components/layout/layout.tsx#function Sidebar | a closing sidebar finds its toggle via [aria-controls=<sidebar id>]; consumers must give the sidebar an id and its toggles aria-controls, or focus falls to the body Why: packages/ui/src/components/layout/layout.tsx#function Layout | the compact overlay effect must stay a layout effect and leave open sidebars' inert alone, or main stays inert when focus moves to the toggle and closed sidebars lose inert on cleanup
34 of 51 tasks
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.
Fixes #44.
The shared
Sidebarnow setsaria-hiddenandinertfrom its open state, so every left and right sidebar consumer gets the pattern the details sidebar used (removed fromchannel.tsxas redundant). The collapsed desktop left track keepsvisibility: visible, so this can't come from CSS.Sidebarhands focus to the control witharia-controls="<sidebar id>"when the sidebar closes with focus inside. The app's left sidebar getsid="sidebar", and the channels and issues/PRs toggles getaria-controls.mainis no longer inert when focus moves to the toggle inside it. It also no longer saves and restores an open sidebar's owninert, which used to leave a just-closed overlay sidebar non-inert. Animation and CSS are unchanged.Verification
bun typesandbun run cipass. Checked with Playwright and Chromium against a built app served by a source host with isolatedACE_HOME,ACE_CONFIG_HOME,ACE_PORTandACE_KEYCHAIN_SERVICE. The project had two channels.ace:channels-toggleshortcut path, leaves focus on Toggle channels sidebar.alpha) is unchanged. Selectingbetafrom the reopened sidebar works.maininert and the sidebar interactive. Closing with focus inside moves focus to the toggle. Closing by an outside click leaves the sidebar inert/aria-hidden andmainnot inert. Going back to 1280px keeps the attributes in line withdata-left.Not checked with a real screen reader. The desktop (Electrobun/WebKit) build was not run.
Built in Ace
No. Made by a Claude Code subagent in a terminal at the maintainer's choice for this session; not an Ace capability gap. Dogfooding: #5.