Merge pull request #469 from mashmatrix/support-slds-2-radio-radio-group

Update `Radio` and `RadioGroup` for SLDS2

Author: stomita

src/scripts/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { FC, InputHTMLAttributes, Ref, useContext } from 'react';
+import React, { FC, InputHTMLAttributes, Ref, useId, useContext } from 'react';
 import classnames from 'classnames';
 import { RadioGroupContext, RadioValueType } from './RadioGroup';
 import { useEventCallback } from './hooks';
@@ -17,6 +17,7 @@ export type RadioProps = {
  *
  */
 export const Radio: FC<RadioProps> = ({
+  id: id_,
   className,
   label,
   name,
@@ -26,7 +27,16 @@ export const Radio: FC<RadioProps> = ({
   children,
   ...props
 }) => {
-  const { name: grpName, onValueChange } = useContext(RadioGroupContext);
+  const {
+    name: grpName,
+    error,
+    errorId,
+    onValueChange,
+  } = useContext(RadioGroupContext);
+
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
   const onChange = useEventCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange_?.(e);
@@ -37,17 +47,21 @@ export const Radio: FC<RadioProps> = ({
   );
   const radioClassNames = classnames(className, 'slds-radio');
   return (
-    <label className={radioClassNames}>
+    <span className={radioClassNames}>
       <input
         ref={inputRef}
         type='radio'
         name={name ?? grpName}
         value={value}
         onChange={onChange}
         {...props}
+        id={id}
+        aria-describedby={error ? errorId : undefined}
       />
-      <span className='slds-radio_faux' />
-      <span className='slds-form-element__label'>{label || children}</span>
-    </label>
+      <label className='slds-radio__label' htmlFor={id}>
+        <span className='slds-radio_faux' />
+        <span className='slds-form-element__label'>{label || children}</span>
+      </label>
+    </span>
   );
 };

src/scripts/RadioGroup.tsx

@@ -1,4 +1,5 @@
 import React, {
+  useId,
   HTMLAttributes,
   Ref,
   createContext,
@@ -9,6 +10,7 @@ import React, {
 import classnames from 'classnames';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
+import { FormElementProps } from './FormElement';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
 
@@ -22,6 +24,8 @@ export type RadioValueType = string | number;
  */
 export const RadioGroupContext = createContext<{
   name?: string;
+  error?: FormElementProps['error'];
+  errorId?: string;
   onValueChange?: Bivariant<(value: RadioValueType) => void>;
 }>({});
 
@@ -83,21 +87,25 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
         ? error.message
         : undefined
       : undefined;
+
+    const errorId = useId();
     const grpCtx = useMemo(
-      () => ({ name, onValueChange }),
-      [name, onValueChange]
+      () => ({ name, error, errorId, onValueChange }),
+      [name, error, errorId, onValueChange]
     );
 
     return (
       <fieldset
         ref={elementRef}
         className={grpClassNames}
         style={grpStyles}
+        role='radiogroup'
+        aria-required={required}
         {...rprops}
       >
         <legend className='slds-form-element__label'>
           {required ? (
-            <abbr className='slds-required' title='required'>
+            <abbr className='slds-required' title='required' aria-hidden='true'>
               *
             </abbr>
           ) : undefined}
@@ -112,7 +120,12 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
           <RadioGroupContext.Provider value={grpCtx}>
             {children}
             {errorMessage ? (
-              <div className='slds-form-element__help'>{errorMessage}</div>
+              <div
+                className='slds-form-element__help'
+                id={error ? errorId : undefined}
+              >
+                {errorMessage}
+              </div>
             ) : undefined}
           </RadioGroupContext.Provider>
         </div>