Skip to content

feat(web): link the component and vulnerability lists to each other - #678

Merged
haksungjang merged 1 commit into
mainfrom
feat/ui-cross-section-links
Aug 14, 2026
Merged

feat(web): link the component and vulnerability lists to each other#678
haksungjang merged 1 commit into
mainfrom
feat/ui-cross-section-links

Conversation

@haksungjang

@haksungjang haksungjang commented Aug 14, 2026

Copy link
Copy Markdown
Member

What changed

A component's expanded detail opens the Vulnerabilities section filtered to
that component, and a vulnerability's detail opens the Components section
filtered to its package. Both reuse the seed mechanism the Overview jump cards
already use, so this is routing plus a seeded filter, not a new state path.

Placement is deliberate. The links sit in the expanded detail rather than on
the row's cells because each row carries role="button" (it is the expand
control), and axe rejects a control nested in a control on nested-interactive.
The first attempt put them on the package cell and the risk badge; that is what
the rule caught.

Two findings the new axe run surfaced

  • The fixed-version column used text-emerald-600, which measures 3.77:1
    against the light surface, under the 4.5:1 minimum. It moves to -700
    (5.48:1). Dark mode was already fine at 10.2:1.
  • A contrast check taken while a panel is still fading reads blended colours
    and reported a genuine 4.6:1 pair as 4.23:1. A shared waitForSettled helper
    now waits for the element's animations before any axe assertion, and the
    dialog spec added in the previous change uses it too.

Visual baselines

Unchanged, and verified rather than assumed. The contrast fix looked like it
would move the Vulnerabilities snapshots, so a reseed run was dispatched: it
regenerated nothing and all 33 baselines came back byte-identical, and the
strict job passes. The reason is that maxDiffPixels: 0 bounds how many
pixels may differ, while whether a pixel differs at all is decided by
Playwright's per-pixel colour threshold, and the two shades sit inside it.
The rendered colour does change: the browser reports rgb(4, 120, 87), and a
locally regenerated snapshot contains 0 pixels of the old shade against 65 of
the new one.

Verification

  • typecheck, token:lint, i18n:check (718 keys, en = ko), build, test:lib-gate
  • test:unit 323 passed
  • test:ui 99 passed including 4 new in cross-links.spec.ts, with axe on both
    sections; the accessibility spec was re-run repeatedly to confirm the fade
    flake is gone
  • Doc gates: coverage, links, ko-style

Investigating a finding meant retyping a name into the other section's search
box: a CVE names its package, a component row shows a severity, and neither
reached the other. A component's expanded detail now opens the vulnerability
list filtered to that component, and a vulnerability's detail opens the
component list filtered to its package. Both reuse the seeding the Overview
jump cards already use.

The links sit in the expanded detail rather than on the row's cells because
each row is itself the expand control, and a control nested in a control is
not announced reliably. axe rejected the first placement on that rule.

The same axe run reported a real contrast defect next to it: the fixed-version
column measured 3.77:1 against the light background, so it moves one shade
darker. The visual baselines are unchanged. The two shades sit within
Playwright's per-pixel colour threshold, so the comparison counts no differing
pixels and a reseed regenerates nothing.

Modal and section animations are now settled before an accessibility check
runs, through a shared test helper. A check taken mid-fade reads blended
colours and reported a 4.6:1 pair as 4.23:1.
@haksungjang
haksungjang force-pushed the feat/ui-cross-section-links branch from d5fbace to 15b3a06 Compare August 14, 2026 13:57
@haksungjang
haksungjang merged commit c0e0fbb into main Aug 14, 2026
38 checks passed
@haksungjang
haksungjang deleted the feat/ui-cross-section-links branch August 14, 2026 14:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant