test(ButtonGroup): 💍 visual regression by punkbit · Pull Request #985 · ClickHouse/click-ui

punkbit · 2026-04-13T14:00:56Z

Why?

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

⚠️ TODO: Due to "accessibility" changes, do include a changeset

How?

Extend ButtonGroup storybook stories
Introduce ButtonGroup test spec for visual regression
Store snapshot

Tickets?

N/A

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?

Add comprehensive visual regression tests for ButtonGroup component. This establishes a baseline before migrating from styled-components to CSS Modules. Includes: - Extended Storybook stories (15 total) covering all variants - 32 Playwright visual regression tests - Light and dark theme coverage - Selection, disabled, and layout state tests - Interactive state tests (hover, focus) - Accessibility tests

changeset-bot · 2026-04-13T14:01:02Z

⚠️ No Changeset found

Latest commit: caefe46

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

The explicit role=button was redundant since <button> elements already have an implicit button role. Removing it cleans up the DOM and avoids potential confusion with assistive technologies.

- Add aria-pressed assertion to borderless-selected test for parity - Add pressedButtons count assertion to multi-select borderless tests - Add dark theme coverage for interactive states (hover, focus)

Add page.locator('body').click() before Tab keypress in keyboard navigation test to ensure keyboard events target page content rather than browser chrome. Prevents flakiness in CI.

Add pressed button visibility checks to dark theme selection tests for parity with light theme counterparts.

… tests Ensures consistency between light and dark theme test setup. Light theme tests use getStoryUrl(..., 'light'), now dark theme tests also use getStoryUrl(..., 'dark') instead of relying on Playwright's colorScheme alone. This makes tests more resilient to Storybook default theme changes.

Add aria-label to Playground story for accessibility compliance. ARIA groups should have accessible names to describe their purpose to screen reader users. Also adds test to verify aria-label is present. Note: Component already supports aria-label via HTMLAttributes spread, this change adds it to the example story and includes a test for it.

Add tests verifying that buttons can be activated using Space and Enter keys when focused. This improves keyboard interaction coverage and ensures accessibility compliance for keyboard-only users.

- Replace hardcoded Storybook URL with getStoryUrl() utility - Remove redundant use({ colorScheme: 'dark' }) calls since getStoryUrl already controls theme via &globals=theme:dark parameter

punkbit · 2026-04-13T14:43:47Z

buttongroup.spec.ts:342,352,371,381 — page.waitForTimeout(100) before hover/focus screenshots is fragile and can flake under load. Playwright applies hover/focus synchronously; consider removing these waits or replacing with expect(button).toHaveCSS(...) if you need to guard against a CSS transition.

The timeout's ok for now. Do ignore!

github-actions · 2026-04-13T14:44:31Z

Claude finished @punkbit's task in 2m 40s —— View job

Great work on this PR — comprehensive visual regression coverage with light/dark, all variants, interactive states, and basic a11y checks. The cascade fix ([aria-pressed='true'] after :hover) is a real improvement, and the overview.spec.ts locator update is the right call after removing the redundant role="button".

A couple of small things worth addressing:

♿ Accessibility

ButtonGroup.tsx — No :focus-visible style is defined on Button. The browser default outline appears (captured in your focus snapshots), but CONVENTIONS.md requires an explicit :focus-visible style. This is pre-existing, but since this PR is establishing the visual baseline for the CSS-modules migration, it's the right time to pin a deliberate focus ring rather than inheriting whatever the browser decides. Fix this →

💡 Suggestions (non-blocking)

buttongroup.spec.ts:453 — toHaveAttribute('aria-label') only checks the attribute exists, not its value. A stronger assertion would be toHaveAttribute('aria-label', 'Button group playground') to actually verify the prop is wired up correctly. Fix this →
buttongroup.spec.ts — There's no snapshot for hovering over an active (pressed) button. Since the CSS reordering in this PR changed that interaction (active styles now win over hover), a regression test for that state would lock in the intended behaviour going forward.
ButtonGroup.stories.tsx:154 — console.log in the MultiSelect story's onClick is noisy in CI logs. Fine to leave for now but worth a cleanup before the CSS-modules migration lands.

workflow-authentication-public · 2026-04-13T14:46:03Z

📚 Storybook Preview Deployed

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

Built from commit: afab7cead7c9b16626ea0625853fa13f1385770e

punkbit · 2026-04-13T15:48:04Z

ButtonGroup.tsx — No :focus-visible style is defined on Button. The browser default outline appears (captured in your focus snapshots), but CONVENTIONS.md requires an explicit :focus-visible style. This is pre-existing, but since this PR is establishing the visual baseline for the CSS-modules migration, it's the right time to pin a deliberate focus ring rather than inheriting whatever the browser decides.

The :focus-visible is addressed in related PR here #986. Do ignore!

punkbit added 2 commits April 13, 2026 14:47

chore: 🤖 button group snapshots

ba6da79

fix: 🐛 button html attributes

7ca3331