Updated button component accessibility

lib/component/button/Button.tsx

@@ -1,24 +1,42 @@
+
+
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import * as React from "react";
 
 
-export default function Button(props: ButtonProps){
-	const {
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{
 			className,
 			rounding = "lg",
 			shape = "rectangle",
 			size = "md",
 			variant = "standard",
 			disabled,
+			ariaLabel,
+			ariaDescribedBy,
+			ariaControls,
+			role,
+			tabIndex,
+			children,
+			onClick,
 			...buttonProps
-	} = props;
-
-
+		},
+		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
@@ -52,6 +70,11 @@ export default function Button(props: ButtonProps){
 						"cursor-pointer": !disabled
 					}
 				)}
-		/>
+			>
+				{children}
+			</button>
 		);
-}
+	}
+);
+
+export default Button;

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;
 }