LC-187: Fix failing Storybook tests in Data Table component

packages/ui-components/src/lib/hooks/useFormContext.ts

@@ -1,7 +1,14 @@
 import { useContext } from 'react';
 import { FormikContext, FormikContextType } from 'formik';
 
-// Note: Using context this way instead of useFormikContext suppresses the error if it is not within Formik
-// TODO: #106 Fix React 18 TypeScript errors @jaredhill4
-// @ts-ignore
-export const useFormContext = <T>() => useContext<FormikContextType<T>>(FormikContext); // Using context this way instead of useFormikContext suppresses the error if it is not within Formik
+// This hook safely gets the Formik context if available, or returns null if not
+export const useFormContext = <T>() => {
+  try {
+    // Using context this way instead of useFormikContext suppresses the error if it is not within Formik
+    const context = useContext<FormikContextType<T>>(FormikContext);
+    return context;
+  } catch (error) {
+    // Return null if context is not available or there's an error
+    return null;
+  }
+};

packages/ui-components/src/lib/inputs/InputRadio/InputRadio.tsx

@@ -19,7 +19,7 @@ export const InputRadio: FC<InputRadioProps> = ({
 }) => {
   return (
     <FormControlLabel
-      control={<Radio {...props} color={color} />}
+      control={<Radio {...props} color={color} inputProps={{ 'aria-label': typeof label === 'string' ? label : undefined }} />}
       className={classNames('lc-input lc-input-radio', className)}
       label={label}
       labelPlacement={labelPlacement}

packages/ui-components/src/lib/inputs/InputRadio/InputRadioGroup.tsx

@@ -17,7 +17,7 @@ export const InputRadioGroup: FC<InputRadioGroupProps> = ({ className, formikPro
   const formContext = useFormContext();
   if (!formikProps && formContext) formikProps = formContext;
 
-  const fieldProps = formikProps?.getFieldProps(props.name);
+  const fieldProps = formikProps?.getFieldProps?.(props.name);
   const fieldValue = props.value ?? fieldProps?.value;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -28,7 +28,12 @@ export const InputRadioGroup: FC<InputRadioGroupProps> = ({ className, formikPro
   return (
     <FormControl className={classNames('lc-input-radio-group', className)} component="fieldset">
       {label && <FormLabel component="legend">{label}</FormLabel>}
-      <RadioGroup aria-label={props.name} onChange={handleChange} value={fieldValue} {...props} />
+      <RadioGroup 
+        aria-label={props.name} 
+        onChange={handleChange} 
+        value={fieldValue} 
+        {...props} 
+      />
     </FormControl>
   );
 };

packages/ui-components/src/lib/inputs/InputSwitch/InputSwitch.tsx

@@ -66,6 +66,8 @@ export const InputSwitch: FC<InputSwitchProps> = ({
         name={name}
         type="checkbox"
         className="lc-input-switch-input"
+        role="switch"
+        aria-checked={fieldValue}
         {...fieldProps}
         {...props}
         checked={fieldValue}