Skip to content

[refactor] Replace ArtifactPanel hand-rolled links-toggle with Collapsible primitive #92

@fedorovvvv

Description

@fedorovvvv

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions