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