[ui][radio list] support required, disabled and item descriptions

packages/ui/src/RadioList/RadioList.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
+import { useId } from 'react';
 
 import { RadioListContext } from './RadioListContext';
 import RadioListItem from './RadioListItem';
@@ -10,11 +11,13 @@ type Props<T> = Readonly<{
   children: ReadonlyArray<React.ReactElement<typeof RadioListItem>>;
   defaultValue?: T;
   description?: string;
+  disabled?: boolean;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
   onChange?: (value: T, event: ChangeEvent<HTMLInputElement>) => void;
   orientation?: RadioListOrientation;
+  required?: boolean;
   value?: T;
 }>;
 
@@ -24,35 +27,47 @@ export default function RadioList<T>({
   children,
   defaultValue,
   description,
+  disabled,
   orientation = 'vertical',
   isLabelHidden,
   name,
   label,
+  required,
   value,
   onChange,
 }: Props<T>) {
+  const labelId = useId();
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore TODO: Figure out how to type the onChange.
-    <RadioListContext.Provider value={{ defaultValue, name, onChange, value }}>
+    <RadioListContext.Provider
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore TODO: Figure out how to type the onChange.
+      value={{ defaultValue, disabled, name, onChange, value }}>
       <div>
-        <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-4')}>
-          <label className="text-base font-medium text-gray-900">{label}</label>
+        <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-2')}>
+          <label className="text-sm font-medium text-gray-900" id={labelId}>
+            {label}
+            {required && (
+              <span aria-hidden="true" className="text-danger-500">
+                {' '}
+                *
+              </span>
+            )}
+          </label>
           {description && (
-            <p className="text-sm leading-5 text-gray-500">{description}</p>
+            <p className="text-xs leading-5 text-gray-500">{description}</p>
           )}
         </div>
-        <fieldset>
-          <legend className="sr-only">TODO</legend>
-          <div
-            className={clsx(
-              'space-y-4',
-              orientation === 'horizontal' &&
-                'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
-            )}>
-            {children}
-          </div>
-        </fieldset>
+        <div
+          aria-labelledby={labelId}
+          aria-required={required != null ? required : undefined}
+          className={clsx(
+            'space-y-2',
+            orientation === 'horizontal' &&
+              'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+          )}
+          role="radiogroup">
+          {children}
+        </div>
       </div>
     </RadioListContext.Provider>
   );

packages/ui/src/RadioList/RadioListContext.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 
 type RadioListContextValue<T = unknown> = {
   defaultValue?: T;
+  disabled?: boolean;
   name?: string;
   onChange?: (
     value: T,

packages/ui/src/RadioList/RadioListItem.tsx

@@ -1,42 +1,78 @@
+import clsx from 'clsx';
 import { useId } from 'react';
 
 import { useRadioListContext } from './RadioListContext';
 
 type Props<T> = Readonly<{
-  label?: string;
+  description?: string;
+  disabled?: boolean;
+  label: string;
   value: T;
 }>;
 
-export default function RadioListItem<T>({ label, value }: Props<T>) {
+export default function RadioListItem<T>({
+  description,
+  disabled: disabledProp = false,
+  label,
+  value,
+}: Props<T>) {
   const id = useId();
+  const descriptionId = useId();
   const context = useRadioListContext();
+  const disabled = context?.disabled ?? disabledProp;
 
   return (
-    <div className="flex items-center">
-      <input
-        checked={context?.value != null ? value === context?.value : undefined}
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
-        defaultChecked={
-          context?.defaultValue != null
-            ? value === context?.defaultValue
-            : undefined
-        }
-        id={id}
-        name={context?.name}
-        type="radio"
-        onChange={
-          context?.onChange != null
-            ? (event) => {
-                context?.onChange?.(value, event);
-              }
-            : undefined
-        }
-      />
-      <label
-        className="ml-3 block text-sm font-medium text-gray-700"
-        htmlFor={id}>
-        {label}
-      </label>
+    <div
+      className={clsx(
+        'relative flex',
+        // Vertically center only when there's no description.
+        description == null && 'items-center',
+      )}>
+      <div className="flex h-5 items-center">
+        <input
+          aria-describedby={description != null ? descriptionId : undefined}
+          checked={
+            context?.value != null ? value === context?.value : undefined
+          }
+          className={clsx(
+            'text-primary-600 focus:ring-primary-500 h-4 w-4 border-slate-300',
+            disabled && 'bg-slate-100',
+          )}
+          defaultChecked={
+            context?.defaultValue != null
+              ? value === context?.defaultValue
+              : undefined
+          }
+          disabled={disabled}
+          id={id}
+          name={context?.name}
+          type="radio"
+          onChange={
+            context?.onChange != null
+              ? (event) => {
+                  context?.onChange?.(value, event);
+                }
+              : undefined
+          }
+        />
+      </div>
+      <div className="ml-3 text-sm">
+        <label
+          className={clsx(
+            'block font-medium',
+            disabled ? 'text-slate-400' : 'text-slate-700',
+          )}
+          htmlFor={id}>
+          {label}
+        </label>
+        {description && (
+          <p
+            className={clsx(disabled ? 'text-slate-400' : 'text-slate-500')}
+            id={descriptionId}>
+            {description}
+          </p>
+        )}
+      </div>
     </div>
   );
 }