From 2eb8c57a5088e607fb2b6b2ce744de18ff2915f8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 25 Jan 2026 01:36:53 +0000
Subject: [PATCH] Palette: Enable accessibility attributes on Button component

Refactored the `Button` component to accept and spread standard HTML button attributes.
This allows developers to add `aria-label`, `aria-expanded`, and other accessibility properties,
which were previously ignored.

Added unit tests to verify that attributes are correctly passed to the DOM element.
---
 src/components/ui/Button.tsx                | 14 +++++--------
 src/components/ui/__tests__/Button.test.tsx | 23 +++++++++++++++++++++
 2 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/__tests__/Button.test.tsx

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 09f6d6b..a9498d9 100644
--- a/src/components/ui/Button.tsx
+++ b/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} />
diff --git a/src/components/ui/__tests__/Button.test.tsx b/src/components/ui/__tests__/Button.test.tsx
new file mode 100644
index 0000000..d97e8a2
--- /dev/null
+++ b/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();
+  });
+});