[XOP]

Description

• CardPrimary and CardSecondary now match CardHorizontal (fix(a11y): add keyboard activation and button role to CardHorizontal #1269). A card with onClick and no inner infoText button or infoUrl link gets role="button" (a button for screen readers). Enter and Space click it. tabIndex stays the same. An inner button or link keeps the keys. A card with no action keeps normal keys.
• A disabled card does not run onClick, on all three cards. The key code from fix(a11y): add keyboard activation and button role to CardHorizontal #1269 now lives in src/utils/keyboard.ts; CardHorizontal uses it too. The CardSecondary info icon is aria-hidden when infoText is set.
• updated tests and couple of eslint suppressions removed

Links and tickets

CUI-308 (CUI-305 to CUI-310 burn-down). Follows #1269.

Checklist

• Breaking changes? (add migration notes in changesets) No.
• Visual changes? (specify in changesets) No.
• Design review needed? No.

Contribution

• Sufficient research before PR
• Self-reviewed the PR
• Manually tested the changes (when applies - visual confirmation in Storybook)
• build and build-storybook work locally (full pre-PR command from AGENTS.md section 2 passes)
• Tests and Stories are aligned with the changes

---

Note

Medium Risk
Shared interaction semantics across three public card components change focus order and when onClick runs (disabled and inner-button cases); consumers relying on old always-focusable or always-clickable behavior may need updates.

Overview
Clickable cards (CardPrimary, CardSecondary, and aligned CardHorizontal) now expose role="button", tabIndex={0}, and Enter/Space activation when they have a consumer onClick and no competing inner control. Shared logic lives in new clickOnActivationKey in src/utils/keyboard.ts.

Focus and roles change by variant: display-only cards are no longer Tab stops; when CardPrimary has an infoText inner button or CardSecondary has an infoUrl link, the card stays non-button and keyboard goes to that control. CardSecondary hides the chevron from the accessible name when infoText is set (aria-hidden).

Disabled and click behavior: all three card types skip onClick when disabled. CardHorizontal also respects explicit onClick={undefined} so only the inner button fires, and refactors body vs inner-button click paths.

Tests, Storybook Keyboard stories, Playwright a11y/focus snapshots, a patch changeset, and removed jsx-a11y/no-noninteractive-tabindex suppressions for the primary/secondary cards accompany the behavior change.

^{Reviewed by Cursor Bugbot for commit a47e13e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

🦋 Changeset detected

Latest commit: a47e13e

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	Patch

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ced04ae. Configure here.}

[DreaminDani]

Two inconsistencies still (feel free to fix elsewhere if not relevant):

1. Spacebar doesn't do anything in secondary card buttons
2. Hitting "Enter" opens in a new tab on primary card but opens in the same tab on secondary card

Not sure if either of these are intentional. Walkthrough (video has audio):

CleanShot.2026-10-19.at.10.46.56.mp4

[workflow-authentication-public]

Storybook Preview Deployed

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

Built from commit: 476a84dc37b75d75df4eed13b48980b0c50bf951

[workflow-authentication-public]

Chromatic Storybook

Check	Status	Link
Storybook	✅ 666 stories published	Open Storybook
UI Tests	✅ 666 tests unchanged	Open build

Built from commit: a47e13eb2264df4eeb5f1a40677a02ffe2fe3e60 · Chromatic run

_{Statuses as of the end of the run. The build link shows the live review state.}