Source: PRD-018 SC-2 audit, Frontend [W3].
template/src/widgets/artifact-panel/ui/ArtifactPanel.svelte:249-291
The Outgoing/Incoming links disclosure is hand-rolled: manual aria-expanded, manual chevron, custom <button> + {#if expanded}. The shared/ui catalogue ships Collapsible (and Accordion) which deliver:
- Built-in
aria-controls ↔ region wiring.
- Slide animation that the current implementation lacks.
- Focus management on collapse/expand.
- Less custom code in the widget.
Fix
Swap the two disclosures to:
<Collapsible bind:open={outgoingExpanded}>
<CollapsibleTrigger ...>Outgoing →</CollapsibleTrigger>
<CollapsibleContent>...</CollapsibleContent>
</Collapsible>
Or use <Accordion type="multiple"> to bind both Outgoing+Incoming together with a single state.
Acceptance
- Both disclosures use the primitive.
- Keyboard: Enter/Space toggle expand; focus stays on trigger.
- Visual smoke (light + dark) passes.
- Auto-collapse on
id change still works (see related issue on the auto-collapse $effect).
Audit traceability
- Reviewer: Frontend, score 6.5/10
Source: PRD-018 SC-2 audit, Frontend [W3].
template/src/widgets/artifact-panel/ui/ArtifactPanel.svelte:249-291The Outgoing/Incoming links disclosure is hand-rolled: manual
aria-expanded, manual chevron, custom<button>+{#if expanded}. Theshared/uicatalogue shipsCollapsible(andAccordion) which deliver:aria-controls↔ region wiring.Fix
Swap the two disclosures to:
Or use
<Accordion type="multiple">to bind both Outgoing+Incoming together with a single state.Acceptance
idchange still works (see related issue on the auto-collapse$effect).Audit traceability