Merge pull request #21 from ragusa-it/palette/button-a11y-fix-1082057340107931289

Palette: Enable accessibility attributes on Button component

src/components/ui/Button.tsx

@@ -1,16 +1,12 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type ButtonHTMLAttributes } from 'react';
 import { motion } from 'motion/react';
 import styles from './Button.module.css';
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'outline';
   size?: 'sm' | 'md' | 'lg';
   children: ReactNode;
   isLoading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  type?: 'button' | 'submit' | 'reset';
-  onClick?: () => void;
 }
 
 export function Button({
@@ -18,10 +14,10 @@ export function Button({
   size = 'md',
   children,
   isLoading,
-  disabled,
   className,
+  disabled,
   type = 'button',
-  onClick,
+  ...props
 }: ButtonProps) {
   return (
     <motion.button
@@ -30,7 +26,7 @@ export function Button({
       disabled={disabled || isLoading}
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
-      onClick={onClick}
+      {...props}
     >
       {isLoading ? (
         <span className={styles.loader} />

src/components/ui/__tests__/Button.test.tsx

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { Button } from '../Button';
+import React from 'react';
+
+describe('Button', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('passes aria-label to the button element', () => {
+    render(<Button aria-label="Test Label">Click me</Button>);
+    const button = screen.getByRole('button', { name: /test label/i });
+    expect(button).toBeTruthy();
+  });
+
+  it('passes other HTML attributes', () => {
+    render(<Button data-testid="custom-button">Click me</Button>);
+    const button = screen.getByTestId('custom-button');
+    expect(button).toBeTruthy();
+  });
+});