From 8d1132606a76892cdedff9f8674d294dd5f1c7d5 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Thu, 3 Apr 2025 16:22:52 -0400
Subject: [PATCH] fix: add aria-label to radio groups

---
 app/components/RadioGroup.tsx              | 22 +++++++++++++++++++---
 app/routes/users/dialogs/reassign-user.tsx |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/components/RadioGroup.tsx b/app/components/RadioGroup.tsx
index e649d44..2c055f3 100644
--- a/app/components/RadioGroup.tsx
+++ b/app/components/RadioGroup.tsx
@@ -13,6 +13,7 @@ import { useRadioGroupState } from 'react-stately';
 
 interface RadioGroupProps extends AriaRadioGroupProps {
 	children: React.ReactElement<RadioProps>[];
+	label: string;
 	className?: string;
 }
 
@@ -20,7 +21,13 @@ const RadioContext = createContext<RadioGroupState | null>(null);
 
 function RadioGroup({ children, label, className, ...props }: RadioGroupProps) {
 	const state = useRadioGroupState(props);
-	const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+	const { radioGroupProps, labelProps } = useRadioGroup(
+		{
+			...props,
+			'aria-label': label,
+		},
+		state,
+	);
 
 	return (
 		<div {...radioGroupProps} className={cn('flex flex-col gap-2', className)}>
@@ -33,13 +40,21 @@ function RadioGroup({ children, label, className, ...props }: RadioGroupProps) {
 }
 
 interface RadioProps extends AriaRadioProps {
+	label: string;
 	className?: string;
 }
 
-function Radio({ children, className, ...props }: RadioProps) {
+function Radio({ children, label, className, ...props }: RadioProps) {
 	const state = useContext(RadioContext);
 	const ref = useRef(null);
-	const { inputProps, isSelected, isDisabled } = useRadio(props, state!, ref);
+	const { inputProps, isSelected, isDisabled } = useRadio(
+		{
+			...props,
+			'aria-label': label,
+		},
+		state!,
+		ref,
+	);
 	const { isFocusVisible, focusProps } = useFocusRing();
 
 	return (
@@ -48,6 +63,7 @@ function Radio({ children, className, ...props }: RadioProps) {
 				<input {...inputProps} {...focusProps} ref={ref} className="peer" />
 			</VisuallyHidden>
 			<div
+				aria-hidden="true"
 				className={cn(
 					'w-5 h-5 aspect-square rounded-full p-1 border-2',
 					'border border-headplane-600 dark:border-headplane-300',
diff --git a/app/routes/users/dialogs/reassign-user.tsx b/app/routes/users/dialogs/reassign-user.tsx
index 4019d6b..d31fdcc 100644
--- a/app/routes/users/dialogs/reassign-user.tsx
+++ b/app/routes/users/dialogs/reassign-user.tsx
@@ -51,7 +51,7 @@ export default function ReassignUser({
 								.map((role) => {
 									const { name, desc } = mapRoleToName(role);
 									return (
-										<RadioGroup.Radio key={role} value={role}>
+										<RadioGroup.Radio key={role} value={role} label={name}>
 											<div className="block">
 												<p className="font-bold">{name}</p>
 												<p className="opacity-70">{desc}</p>