Update radio button with input suggestions

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 
 
 const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
-	id,
+	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	name,
@@ -17,7 +17,6 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	strokeWidth = 2,
 	value,
 	disabled,
-	ariaLabel,
 	children
 }, ref ) => {
 	return (
@@ -26,6 +25,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			className={clsx(
 				"group",
 				"flex flex-row items-center justify-start gap-x-2",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 				{
 					"cursor-pointer": !disabled,
 					"cursor-not-allowed": disabled
@@ -37,7 +37,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			onChange={onChange}
 			value={value}
 			disabled={disabled}
-			aria-label={ariaLabel}
+			aria-labelledby={`${id}Label`}
 			ref={ref}
 		>
 			{/* Checkbox */}
@@ -73,11 +73,12 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			{/* Label */}
 			{
 				children &&
-				<div
+				<span
+					id={`${id}Label`}
 					className={labelClassName}
 				>
 					{children}
-				</div>
+				</span>
 			}
 		</Checkbox>
 	);

lib/component/input/radio/RadioButton.tsx

@@ -5,18 +5,29 @@ import { forwardRef } from "react";
 
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
-	id,
+	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	size = "sm",
 	value,
+	disabled,
 	children
 }, ref ) => {
 	return (
 		<Radio
 			id={id}
 			value={value}
-			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+			className={clsx(
+				"group",
+				"flex flex-row items-center justify-center gap-x-2",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+				{
+					"cursor-pointer": !disabled,
+					"cursor-not-allowed": disabled
+				}
+			)}
+			disabled={disabled}
+			aria-labelledby={`${id}Label`}
 			ref={ref}
 		>
 			<div
@@ -35,11 +46,12 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 			/>
 			{
 				children &&
-				<div
+				<span
+					id={`${id}Label`}
 					className={labelClassName}
 				>
 					{children}
-				</div>
+				</span>
 			}
 		</Radio>
 	);

lib/types/InputTypes.ts

@@ -137,7 +137,6 @@ export interface CheckboxProps {
 	strokeWidth?: number;
 	value?: string;
 	disabled?: boolean;
-	ariaLabel: string;
 	children?: React.ReactNode;
 }
 
@@ -149,6 +148,7 @@ export interface RadioButtonProps {
 	labelClassName?: string;
 	size?: RadioButtonSize;
 	value: string;
+	disabled?: boolean;
 	children?: React.ReactNode;
 }