fix(ui-ux): give Event Lineage DAG node marks a 24x24px hit target by seonghobae · Pull Request #554 · ContextualWisdomLab/LineageWeave

seonghobae · 2026-08-24T01:17:01Z

Gap

Dimension: touch_interaction (medium severity)

Event Lineage DAG node marks (frontend/src/LineageDag.tsx) are a plain
<circle r={7} /> — a 14px-diameter visible mark with no separate hit
area — inside a role="button" <g> that already carries the
click/keydown handlers. That's well under the WCAG 2.2 SC 2.5.8 (AA)
minimum target size of 24x24 CSS px.

Note on the originally-filed evidence: the gap report's code snippet
(a NodeMark component with NODE_RADIUS, root/branch shape variants,
a --size-control-min ≈ 44px convention) does not match this file's
actual current state — it appears to describe a different revision. I
re-read the file in this worktree before editing per the task's ground-
truth-verification step. The real, current --size-control-min token in
frontend/src/styles/tokens.css is 24px, not 44px, and there is no
other 44px touch-target convention anywhere in the repo (verified via
repo-wide grep). This fix targets the actual code and the actual token
value.

Fix

Add a transparent, pointer-events: all circle as the first child
inside the existing <g role="button">, ahead of the visible 7px mark,
sized r=12 (24px diameter) — matching --size-control-min at this
DAG's ~1-SVG-user-unit-per-px scale (lineageLayout.ts already treats
ROW_H/COL_W/PAD as pixel-equivalent units). No CSS/appearance
change; only the effective click/tap area grows. ROW_H is a 52px row
pitch, so a 24px hit circle leaves 28px of clearance between vertically
adjacent nodes — no collision risk.

const NODE_HIT_RADIUS = 12; // matches --size-control-min (24px)
...
<circle className="lineage-dag-hit" r={NODE_HIT_RADIUS} fill="transparent" style={{ pointerEvents: "all" }} />
<circle r={7} />

Tests

Added frontend/src/LineageDag.test.tsx:

asserts the hit circle exists, is painted before the visible mark,
is fill="transparent" with pointer-events: all, and has r >= 12
regression check that clicking still calls onSelectPost

Confirmed red→green: the new hit-target test fails on the pre-fix
LineageDag.tsx (expected 2 circles, got 1) and passes after the fix.

Check output (from `frontend/`)

$ corepack pnpm exec vitest run src/LineageDag.test.tsx src/lineageLayout.test.ts
 Test Files  2 passed (2)
      Tests  6 passed (6)

$ corepack pnpm exec tsc -b
# 2 pre-existing errors in src/App.tsx (unused import, AdminPanel prop typing) --
# present identically on main with this diff removed; unrelated to this change,
# not introduced by it.

$ corepack pnpm exec oxlint src/LineageDag.tsx src/LineageDag.test.tsx
# clean, exit 0

$ corepack pnpm exec vitest run   # full suite
 Test Files  1 failed | 13 passed (14)
      Tests  2 failed | 140 passed (142)
# The 2 failures are src/App.test.tsx timeouts ("shows the seeded analysis run
# on the home page", "warns that a cutoff-rewritten title...") -- reproduced
# with this diff fully reverted, so pre-existing/unrelated to this change.

Not merging -- leaving for review per team process.

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com

The visible node mark in LineageDag.tsx is a 7px-radius (14px) SVG circle with no separate hit area, well under the WCAG 2.2 SC 2.5.8 AA minimum of 24x24 CSS px and this codebase's own --size-control-min token (styles/tokens.css). Add a transparent, pointer-events:all circle (r=12, matching --size-control-min at this DAG's ~1 user-unit-per-px scale) as the first child inside the existing role="button" <g>, ahead of the visible mark, so it enlarges the click/tap area without changing appearance. ROW_H is a 52px row pitch (lineageLayout.ts), so a 24px-diameter hit circle leaves 28px of clearance between adjacent rows -- no overlap. Adds LineageDag.test.tsx asserting the hit circle is present, sized >=24px diameter, transparent, and painted before the visible mark, plus a click-still-works regression check. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011jWJzKUd82yy97esEBfJbt

coderabbitai · 2026-08-24T01:17:16Z

Warning

Review limit reached

Next included review available in 54 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 01fd843b-7374-42cd-9445-858e6a579273

📥 Commits

Reviewing files that changed from the base of the PR and between b4911f8 and a650675.

📒 Files selected for processing (7)

docs/storybook-inventory.md
frontend/src/App.css
frontend/src/LineageDag.css
frontend/src/LineageDag.responsive.test.tsx
frontend/src/LineageDag.stories.tsx
frontend/src/LineageDag.test.tsx
frontend/src/LineageDag.tsx

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/uiux-touch_interaction-lineage-dag-node-touch-target

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

…ll rule The .lineage-dag-node circle rule paints every child circle with --surface-muted plus a border stroke, and author CSS overrides the fill="transparent" presentation attribute, so the enlarged hit target rendered as a second opaque disc. Scope an explicit transparent/no-stroke override to .lineage-dag-hit (devin review thread).

- The unauthenticated Log in handler now calls returnUrlFromLocation() then rememberOidcReturnUrl() before signinRedirect, per ADR 0109, so a shared /?post= link still opens that post after enterprise SSO. The previously unused oidcReturnUrl import is now load-bearing. - AdminPanel renders only when accessToken is a string; the OIDC access token is string | undefined before isAuthenticated narrowing.

…touch-target

The aria-current ring rule (0,2,1) outranked the hit-circle override (0,2,0) and painted a large hollow ring around the current node's mark. Exclude .lineage-dag-hit from the focus/hover/current selectors via :not(), which never matches the hit circle at all, and lift the override to (0,3,0) so future circle-scoped emphasis rules lose by specificity rather than source order (devin review thread).

Equal-specificity source-order was still letting the aria-current ring paint over the hit circle. :not(.lineage-dag-hit) on the emphasis selectors never matches the hit target, closing the ring regression for good.

width="100%" plus a viewBox let the container scale the coordinate system, shrinking the effective 24px hit target below WCAG 2.5.8 on wide containers. Render at the layout's own user-unit width (height already behaves this way) so one SVG unit stays ~1 CSS px and the hit radius keeps its intended size; horizontal overflow is handled by the panel's existing scroll container.

devin-ai-integration

Devin Review found 2 new potential issues.

devin-ai-integration · 2026-08-24T09:34:41Z

+                    <circle
+                      className="lineage-dag-hit"
+                      r={NODE_HIT_RADIUS}
+                      fill="transparent"
+                      style={{ pointerEvents: "all" }}
+                    />
                    <circle r={7} />


📝 Info: Hit circle stacking and specificity are consistent

The transparent hit circle is rendered first so the visible mark paints over it, and the added .lineage-dag-hit rule plus the :not(.lineage-dag-hit) guards on the hover/focus/current selectors (App.css:564-571) keep the enlarged target from painting as a second disc or ring.

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration

Devin Review found 2 new potential issues.

devin-ai-integration · 2026-08-24T14:37:47Z

+@media (max-width: 768px) {
+  .lineage-dag-scroll-hint {
+    display: block;
+  }
+}


🟡 Scroll hint shown when lineage fits on screen

The .lineage-dag-scroll-hint renders for every figure and shows on any viewport under 768px, regardless of whether the canvas overflows. A single-node or narrow lineage on a phone still tells the buyer to swipe when there is nothing to scroll.

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-08-24T14:37:48Z

-            </svg>
+              <svg
+                viewBox={`0 0 ${group.width} ${group.height}`}
+                width={group.width}


📝 Info: SVG now renders at intrinsic width on all viewports

Changing the svg from width="100%" to width={group.width} means a wide or deep lineage no longer scales down to fit its container on desktop; it overflows into the horizontal-scroll viewport instead. Both the popup and Ask-answer call sites are affected, not only narrow screens.

Was this helpful? React with 👍 or 👎 to provide feedback.

This comment was marked as resolved.

Sign in to view

seonghobae enabled auto-merge August 24, 2026 01:23

opencode-agent Bot disabled auto-merge August 24, 2026 02:31

This comment was marked as resolved.

Sign in to view

Merge branch 'main' into fix/uiux-touch_interaction-lineage-dag-node-…

689e42e

…touch-target

This comment was marked as resolved.

Sign in to view

seonghobae enabled auto-merge August 24, 2026 05:30

opencode-agent Bot disabled auto-merge August 24, 2026 05:42

seonghobae enabled auto-merge August 24, 2026 05:55

opencode-agent Bot disabled auto-merge August 24, 2026 07:00

seonghobae enabled auto-merge (squash) August 24, 2026 08:03

opencode-agent Bot disabled auto-merge August 24, 2026 08:42

seonghobae and others added 4 commits August 24, 2026 02:09

Merge branch 'main' into fix/uiux-touch_interaction-lineage-dag-node-…

e0794c0

…touch-target

fix(ui-ux): exclude the DAG hit target from focus/hover/current rings

677b000

Equal-specificity source-order was still letting the aria-current ring paint over the hit circle. :not(.lineage-dag-hit) on the emphasis selectors never matches the hit target, closing the ring regression for good.

devin-ai-integration Bot reviewed Aug 24, 2026

View reviewed changes

seonghobae enabled auto-merge August 24, 2026 11:50

seonghobae added 6 commits August 24, 2026 07:29

test(red): require scrollable lineage DAG viewport

38adb83

test(red): require mobile lineage scroll guidance

141a429

fix(ui-ux): keep lineage DAG reachable in narrow viewports

3132682

fix(ui-ux): style keyboard-scrollable lineage viewport

84db804

test(storybook): cover mobile lineage scrolling

cb45b87

docs(storybook): record mobile lineage scroll state

a650675

devin-ai-integration Bot reviewed Aug 24, 2026

View reviewed changes

Navigation Menu

Uh oh!

fix(ui-ux): give Event Lineage DAG node marks a 24x24px hit target - #554

fix(ui-ux): give Event Lineage DAG node marks a 24x24px hit target#554
seonghobae wants to merge 14 commits into
mainfrom
fix/uiux-touch_interaction-lineage-dag-node-touch-target

seonghobae commented Aug 24, 2026 •

edited by devin-ai-integration Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 24, 2026 •

edited

Loading

Review limit reached

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

seonghobae commented Aug 24, 2026 • edited by devin-ai-integration Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Gap

Fix

Tests

Check output (from frontend/)

Uh oh!

coderabbitai Bot commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seonghobae commented Aug 24, 2026 •

edited by devin-ai-integration Bot

Loading

Check output (from `frontend/`)

coderabbitai Bot commented Aug 24, 2026 •

edited

Loading