chore(ButtonGroup): 🤖 Migrate component button group to CSS Modules

.changeset/migrate-component-button-group-to-css.md

@@ -0,0 +1,16 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+Migrate ButtonGroup component from Styled-Components to CSS Modules
+
+**New Features:**
+- **Accessibility**: Added `aria-disabled` attribute to disabled buttons (complements native `disabled` prop)
+- **Accessibility**: Added optional `aria-label` prop for WCAG 4.1.2 compliance (role="group" should have accessible name)
+- **Accessibility**: Added `:focus-visible` styles for keyboard navigation with visible focus ring
+- **Forms**: Added `type="button"` to prevent accidental form submissions when used inside forms
+- **States**: Added proper `:hover:not(:disabled)` selector to prevent hover styles on disabled buttons
+- **States**: Added explicit styling for disabled+active button combination
+
+**Migration Notes:**
+Consumers are encouraged to add `aria-label` to their ButtonGroup instances for improved accessibility, though it remains optional for backward compatibility.

src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,86 @@
+.buttongroup {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
+}
+
+.buttongroup_type_default {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttongroup_type_borderless {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttongroup_fillwidth {
+  width: 100%;
+}
+
+.button {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.button_type_default {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type_borderless {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillwidth {
+  flex: 1;
+}
+
+.button[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  color: var(--click-button-group-color-text-active);
+  font: var(--click-button-group-typography-label-active);
+}
+
+.button[aria-pressed='true']:disabled {
+  background: var(--click-button-group-color-background-disabled-active);
+  color: var(--click-button-group-color-text-disabled-active);
+}
+
+.button:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
+
+.button:focus-visible:not(:disabled) {
+  outline: 2px solid var(--click-button-group-color-background-active);
+  outline-offset: 2px;
+}

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -33,6 +33,7 @@ export const Default: StoryObj<typeof ButtonGroup> = {
       { label: 'Option 3', value: 'option3' },
     ],
     type: 'default',
+    'aria-label': 'Button group',
   },
 };
 
@@ -44,6 +45,7 @@ export const Borderless: StoryObj<typeof ButtonGroup> = {
       { label: 'Option 3', value: 'option3' },
     ],
     type: 'borderless',
+    'aria-label': 'Button group',
   },
 };
 
@@ -56,6 +58,7 @@ export const DefaultSelected: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     selected: 'option1',
+    'aria-label': 'Button group',
   },
 };
 
@@ -68,6 +71,7 @@ export const BorderlessSelected: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'borderless',
     selected: 'option1',
+    'aria-label': 'Button group',
   },
 };
 
@@ -78,6 +82,7 @@ export const WithDisabledButton: StoryObj<typeof ButtonGroup> = {
       { label: 'Disabled', value: 'disabled', disabled: true },
     ],
     type: 'default',
+    'aria-label': 'Button group',
   },
 };
 
@@ -89,6 +94,7 @@ export const WithDisabledSelectedButton: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     selected: 'disabled',
+    'aria-label': 'Button group',
   },
 };
 
@@ -100,6 +106,7 @@ export const FillWidthDefault: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     fillWidth: true,
+    'aria-label': 'Button group',
   },
 };
 
@@ -111,6 +118,7 @@ export const FillWidthBorderless: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'borderless',
     fillWidth: true,
+    'aria-label': 'Button group',
   },
 };
 
@@ -124,6 +132,7 @@ export const MultiSelectSelected: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     selected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
   },
 };
 
@@ -137,6 +146,7 @@ export const MultiSelectBorderless: StoryObj<typeof ButtonGroup> = {
     type: 'borderless',
     multiple: true,
     selected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
   },
 };
 
@@ -151,6 +161,7 @@ export const MultiSelect: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     defaultSelected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
     onClick: (_value, selected) => {
       console.log('🔎 Selected:', [...selected]);
     },
@@ -167,6 +178,7 @@ export const ConsumerControlledStateSingle: StoryObj<typeof ButtonGroup> = {
     fillWidth: false,
     type: 'default',
     selected: 'option2',
+    'aria-label': 'Button group',
   },
   render: args => {
     const [selected, setSelected] = useState(args.selected);
@@ -194,6 +206,7 @@ export const ConsumerControlledStateMulti: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     selected: new Set(['option2']),
+    'aria-label': 'Button group',
   },
   render: args => {
     const [selected, setSelected] = useState(args.selected);

src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -13,7 +13,7 @@ describe('ButtonGroup', () => {
   ];
 
   it('renders buttons with labels correctly', () => {
-    const { getByText } = renderButtonGroup({ options });
+    const { getByText } = renderButtonGroup({ options, 'aria-label': 'Button group' });
 
     options.forEach(option => {
       expect(getByText(option.label).textContent).toBe(option.label);
@@ -27,6 +27,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       onClick: handleClick,
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -45,6 +46,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       onClick: handleClick,
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -66,6 +68,7 @@ describe('ButtonGroup', () => {
       onClick: handleClick,
       multiple: true,
       selected: new Set(['option1']),
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -85,6 +88,7 @@ describe('ButtonGroup', () => {
       onClick: handleClick,
       multiple: true,
       selected: new Set(['option1', 'option2']),
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -97,6 +101,7 @@ describe('ButtonGroup', () => {
       options,
       multiple: true,
       selected: new Set(['option1', 'option3']),
+      'aria-label': 'Button group',
     });
 
     const option1 = getByText('Option 1');
@@ -112,6 +117,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       selected: 'option2',
+      'aria-label': 'Button group',
     });
 
     const activeButton = getByText('Option 2');
@@ -125,6 +131,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         defaultSelected: 'option2',
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 2')).toHaveAttribute('aria-pressed', 'true');
@@ -136,6 +143,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1', 'option3']),
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 1')).toHaveAttribute('aria-pressed', 'true');
@@ -147,6 +155,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         defaultSelected: 'option1',
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -160,6 +169,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1']),
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -173,6 +183,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1', 'option2']),
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -193,6 +204,7 @@ describe('ButtonGroup', () => {
         options,
         defaultSelected: 'option1',
         onClick: handleClick,
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -209,6 +221,7 @@ describe('ButtonGroup', () => {
         options,
         selected: 'option3',
         defaultSelected: 'option1',
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 3')).toHaveAttribute('aria-pressed', 'true');
@@ -219,6 +232,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         selected: 'option1',
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));