BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Updated button component accessibility

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-06 19:45:58 -05:00
parent 0bc94be283
commit dd052b0557
2 changed files with 80 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
lib/component/button/Button.tsx
View File

@@ -1,57 +1,80 @@
import type { ButtonProps } from "$/types/ButtonTypes"; import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx"; 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 ( "px-1 py-0": size === "xs" && shape === "rectangle",
<button "px-2 py-1": size === "sm" && shape === "rectangle",
data-testid="mattrixwv-button" "px-4 py-2": size === "md" && shape === "rectangle",
{...buttonProps} "px-6 py-3": size === "lg" && shape === "rectangle",
disabled={disabled} "px-8 py-4": size === "xl" && shape === "rectangle",
className={clsx( },
className, //Variant
//Rounding {
{ "border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
"rounded-sm": rounding === "sm", "border-none": variant === "ghost" || variant === "icon"
"rounded-md": rounding === "md", },
"rounded-lg": rounding === "lg", //Disabled
"rounded-full": rounding === "full" {
}, "cursor-pointer": !disabled
//Size and shape }
{ )}
"p-0": size === "xs" && shape === "square", >
"p-1": size === "sm" && shape === "square", {children}
"p-2": size === "md" && shape === "square", </button>
"p-3": size === "lg" && shape === "square", );
"p-4": size === "xl" && shape === "square", }
);
"px-1 py-0": size === "xs" && shape === "rectangle", export default Button;
"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
}
)}
/>
);
}

8
lib/types/ButtonTypes.ts
View File

@@ -7,10 +7,16 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
export type ButtonVariant = "standard" | "outline" | "ghost" | "outline-ghost" | "icon"; 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; rounding?: ButtonRounding;
shape?: ButtonShape; shape?: ButtonShape;
size?: ButtonSize; size?: ButtonSize;
variant?: ButtonVariant; variant?: ButtonVariant;
ref?: Ref<HTMLButtonElement>; ref?: Ref<HTMLButtonElement>;
ariaLabel?: string;
ariaDescribedBy?: string;
ariaControls?: string;
role?: string;
tabIndex?: number;
} }