test(CardPrimary): 💍 visual regression

[punkbit]

Why?

Introduce visual regression tests for CardPrimary, as a prerequisite for migrating styled components into CSS modules.

How?

• Extend CardPrimary storybook stories
• Introduce CardPrimary test spec for visual regression
• Store snapshots

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Preview?

[changeset-bot]

🦋 Changeset detected

Latest commit: 1adca91

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 55s —— View job

---

PR Review: test(CardPrimary): visual regression

• Read CLAUDE.md and conventions files
• Read CardPrimary.tsx and changed files
• Analyze changes and form review
• Post review

---

Great iteration — the focus-visible fix landed cleanly and the visual regression suite is comprehensive. One a11y issue remains from the prior rounds.

---

♿ Accessibility

• CardPrimary.tsx:159 — card has tabIndex={0} but no onKeyDown to activate it: When a consumer passes onClick, hasConsumerClick=true and the wrapper gets tabIndex=0, making it keyboard-reachable via Tab. But because it's a div, pressing Enter or Space does nothing — onClick on a div is never triggered by keyboard. The component needs an onKeyDown handler (or to spread through props, which the consumer would have to add manually). This was present in commit dcff5a5b but was removed in 86f7bb1d along with role="button". The conditional tabIndex was added back in 1d41e971 without the handler, leaving the card focusable-but-inactivatable for keyboard users. Fix: add an onKeyDown on the Wrapper that calls props.onClick(e) when Enter or Space is pressed and hasConsumerClick && !disabled is true. Fix this →

💡 Suggestions (non-blocking)

• Changeset type (minor → patch): No new public API additions — this is accessibility bug fixes + test coverage. Per the conventions, minor is for new features. patch fits better here.

• cursor: pointer on non-interactive cards: The &:hover, &:focus-visible rule (line 33-48) applies cursor: pointer to all cards, including those with no action (e.g. WithoutButton). Consider conditionally applying it only when hasConsumerClick || hasAction.

• Focus snapshot uses a non-tab-focusable story: The focus state test (spec line 239) runs against SizeMedium, which has no onClick prop → tabIndex=-1. The snapshot tests the :focus-visible CSS on a card keyboard users can never Tab to. Using a story with a consumer onClick (or the Interactive story once it has an onClick) would make this test reflect real user behavior.

• Interactive story has no snapshot: Still missing visual regression coverage for the onButtonClick path (where Component=Button). It's the primary "card with real action" story.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-kr7ih2t0d-clickhouse.vercel.app

Built from commit: c673805b2523503816bf4c585f65c3cd4b9fc13f