fix: render CardLink as native button when no href is provided

[lorgonal]

Summary

• CardLink now renders a native <button> when no href is provided (onClick-only usage), instead of going through the Link component which marks it as aria-disabled="true"
• Fixes an accessibility issue where screen readers announce the element as disabled and keyboard users cannot activate it, despite the button being fully functional
• Adds tests and stories for the new button fallback behavior

Problem

When CardLink is used without an href (e.g. in Factorial's BalanceCounter widget which passes onClick but no url), the underlying Link component in linkHandler.tsx evaluates !props.href as truthy and sets isDisabled = true. This renders a <span aria-disabled="true" disabled=""> with role="button" — semantically misleading and inaccessible:

• Screen readers announce it as disabled/unavailable
• No native keyboard support (Enter/Space don't activate <span>)
• role="button" + aria-disabled="true" contradicts the element's actual behavior

Solution

CardLink now branches on href:

• No href → renders a native <button type="button"> with proper a11y semantics
• Has href → unchanged behavior via Link

Anchor-specific props (target, rel, download) are stripped when rendering as <button>.

Alternatives Considered

Fix in Link/linkHandler.tsx: Change the isDisabled = !props.href || disabled logic so Link doesn't mark itself disabled when href is absent but onClick is present. This would fix it globally for all Link consumers.

We opted against this because:

• Changing Link's core disabled logic could have unintended side effects across the design system
• A <button> is the semantically correct element for a click-only action — it's not a link without a destination, it's an action trigger
• Localizing the fix to CardLink has zero risk to other Link consumers

Testing

• 3 new unit tests for Card.test.tsx (button rendering, click handler, link fallback)
• New stories: WithClickableLink, WithHrefLink in Card stories
• New story WithOnClickOnlyLink in Widget stories
• All 18 tests passing

[github-actions]

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

[github-actions]

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3476 to install the package

Use pnpm i github:factorialco/f0#6586bdc69834ff749a348b014ef7368ef35f02b5 to install this specific commit

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[github-actions]

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	38.77%	7101 / 18314
🔵	Statements	38.16%	7259 / 19020
🔵	Functions	29.28%	1514 / 5169
🔵	Branches	28.56%	4123 / 14436

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/ui/Card/Card.tsx	97.5%	82.35%	100%	100%	45

Generated in workflow #11120 for commit 1eb1b75 by the Vitest Coverage Report Action