From dd052b05573d8cd61430dcec3317178565872a27 Mon Sep 17 00:00:00 2001
From: Matthew Ellison <m_ellison@ymail.com>
Date: Fri, 6 Feb 2026 19:45:58 -0500
Subject: [PATCH] Updated button component accessibility

---
 lib/component/button/Button.tsx | 123 +++++++++++++++++++-------------
 lib/types/ButtonTypes.ts        |   8 ++-
 2 files changed, 80 insertions(+), 51 deletions(-)

diff --git a/lib/component/button/Button.tsx b/lib/component/button/Button.tsx
index 7ea8089..3cc0e04 100644
--- a/lib/component/button/Button.tsx
+++ b/lib/component/button/Button.tsx
@@ -1,57 +1,80 @@
+
+
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import * as React from "react";
 
 
-export default function Button(props: ButtonProps){
-	const {
-		className,
-		rounding = "lg",
-		shape = "rectangle",
-		size = "md",
-		variant = "standard",
-		disabled,
-		...buttonProps
-	} = props;
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{
+			className,
+			rounding = "lg",
+			shape = "rectangle",
+			size = "md",
+			variant = "standard",
+			disabled,
+			ariaLabel,
+			ariaDescribedBy,
+			ariaControls,
+			role,
+			tabIndex,
+			children,
+			onClick,
+			...buttonProps
+		},
+		ref
+	) => {
+		return (
+			<button
+				ref={ref}
+				data-testid="mattrixwv-button"
+				{...buttonProps}
+				disabled={disabled}
+				aria-label={ariaLabel}
+				aria-describedby={ariaDescribedBy}
+				aria-controls={ariaControls}
+				role={role}
+				tabIndex={tabIndex}
+				className={clsx(
+					className,
+					//Rounding
+					{
+						"rounded-sm": rounding === "sm",
+						"rounded-md": rounding === "md",
+						"rounded-lg": rounding === "lg",
+						"rounded-full": rounding === "full"
+					},
+					//Size and shape
+					{
+						"p-0": size === "xs" && shape === "square",
+						"p-1": size === "sm" && shape === "square",
+						"p-2": size === "md" && shape === "square",
+						"p-3": size === "lg" && shape === "square",
+						"p-4": size === "xl" && shape === "square",
 
-	return (
-		<button
-			data-testid="mattrixwv-button"
-			{...buttonProps}
-			disabled={disabled}
-			className={clsx(
-				className,
-				//Rounding
-				{
-					"rounded-sm": rounding === "sm",
-					"rounded-md": rounding === "md",
-					"rounded-lg": rounding === "lg",
-					"rounded-full": rounding === "full"
-				},
-				//Size and shape
-				{
-					"p-0": size === "xs" && shape === "square",
-					"p-1": size === "sm" && shape === "square",
-					"p-2": size === "md" && shape === "square",
-					"p-3": size === "lg" && shape === "square",
-					"p-4": size === "xl" && shape === "square",
+						"px-1 py-0": size === "xs" && shape === "rectangle",
+						"px-2 py-1": size === "sm" && shape === "rectangle",
+						"px-4 py-2": size === "md" && shape === "rectangle",
+						"px-6 py-3": size === "lg" && shape === "rectangle",
+						"px-8 py-4": size === "xl" && shape === "rectangle",
+					},
+					//Variant
+					{
+						"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
+						"border-none": variant === "ghost" || variant === "icon"
+					},
+					//Disabled
+					{
+						"cursor-pointer": !disabled
+					}
+				)}
+			>
+				{children}
+			</button>
+		);
+	}
+);
 
-					"px-1 py-0": size === "xs" && shape === "rectangle",
-					"px-2 py-1": size === "sm" && shape === "rectangle",
-					"px-4 py-2": size === "md" && shape === "rectangle",
-					"px-6 py-3": size === "lg" && shape === "rectangle",
-					"px-8 py-4": size === "xl" && shape === "rectangle",
-				},
-				//Variant
-				{
-					"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
-					"border-none": variant === "ghost" || variant === "icon"
-				},
-				//Disabled
-				{
-					"cursor-pointer": !disabled
-				}
-			)}
-		/>
-	);
-}
+export default Button;
diff --git a/lib/types/ButtonTypes.ts b/lib/types/ButtonTypes.ts
index 957b114..051a56a 100644
--- a/lib/types/ButtonTypes.ts
+++ b/lib/types/ButtonTypes.ts
@@ -7,10 +7,16 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type ButtonVariant = "standard" | "outline" | "ghost" | "outline-ghost" | "icon";
 
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "type"> {
 	rounding?: ButtonRounding;
 	shape?: ButtonShape;
 	size?: ButtonSize;
 	variant?: ButtonVariant;
 	ref?: Ref<HTMLButtonElement>;
+
+	ariaLabel?: string;
+	ariaDescribedBy?: string;
+	ariaControls?: string;
+	role?: string;
+	tabIndex?: number;
 }