fix(a11y): hide teleported popovers behind a maximized blade - #345
Merged
Conversation
The app hub and notification panels teleport out of the <nav> that carries the covering state, so they end up siblings of it rather than descendants — and `inert` does not cross a Teleport. Maximizing a blade left both panels in the tab order and in the accessibility tree, reachable behind content that was supposed to be covering them. Give VcPopover an `inert` prop rendered on its teleported root and pass the state down from DesktopLayout, the same treatment the AI agent panel and the mobile sidebar already had.
|
📦 Preview published for commit Install the preview with dist-tag: npm install @vc-shell/framework@pr-345Or pin to the exact commit: npm install @vc-shell/framework@2.5.0-pr345.356b508Published packages (dist-tag
|
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.
Problem
The app hub and the notification panel both teleport out of the
<nav>that carries the covering state, so they land as siblings of it rather than descendants — andinertdoes not cross aTeleport. Maximizing a blade left both panels in the tab order and in the accessibility tree, reachable behind content that was supposed to be covering them.VcSidebarandVcAiAgentPanelalready got this treatment in #306; these two were missed because their teleport hides the relationship.Fix
VcPopovergets aninertprop rendered on its teleported root. It has to be a prop: a fallthrough attribute never reaches the real root through theTeleport.AppHubPopoverforwards it to theVcPopoverit wraps.DesktopLayoutpasses the covering state to both panels explicitly.MobileLayoutrenders neither panel, so it needs nothing.Tests
vc-popover.test.ts— the panel carriesinertwhen covered; the attribute is absent otherwise (inert="false"is still inert in HTML, so absence is the assertion).DesktopLayout.test.ts— the layout tells both panels they are covered. This is the assertion that matches the defect: the panels were fine, the layout never told them.Removing either binding fails exactly these tests.
Verification
vue-tscclean ·vitest run4090 passed, exit 0 ·lint:checkclean · prettier, stylelint, madge, layer checks,docs:lintclean.Closes VCST-5815