fix: cleanup name and id for accessibility

src/forms/FieldGroup.tsx

@@ -134,7 +134,7 @@ const FieldGroup = ({
         }
       })
     },
-    [],
+    []
   )
 
   useEffect(() => {
@@ -164,7 +164,11 @@ const FieldGroup = ({
     )
   }
   return (
-    <fieldset aria-describedby={`${name}-group-sub-note ${name}-error`}>
+    <fieldset
+      aria-describedby={`${groupSubNote ? `${name}-group-sub-note` : ""} ${
+        error ? `${name}-error` : ""
+      }`}
+    >
       {groupLabel && (
         <legend className={`text__caps-spaced ${error ? "text-alert" : ""}`}>{groupLabel}</legend>
       )}

src/forms/MultiSelectField.tsx

@@ -36,6 +36,7 @@ const MultiSelectField = (props: MultiSelectFieldProps) => {
   const autocompleteRef = useRef<HTMLInputElement>(null)
 
   const { name, register, setValue } = props
+  const inputId = props.id || name
   register({ name }, props.validation)
 
   useEffect(() => {
@@ -71,19 +72,19 @@ const MultiSelectField = (props: MultiSelectFieldProps) => {
     const labelClasses = ["label"]
 
     return (
-      <label className={labelClasses.join(" ")} htmlFor={props.id}>
+      <label className={labelClasses.join(" ")} htmlFor={inputId}>
         {props.label}
       </label>
     )
-  }, [props.id, props.label])
+  }, [inputId, props.label])
 
   return (
     <div className="field multi-select-field">
       {props.label && label}
       <div className="control" data-testid={props.dataTestId}>
         <Icon symbol="search" size="medium" />
         <input
-          id={props.id}
+          id={inputId}
           ref={autocompleteRef}
           className="input"
           placeholder={props.placeholder}

src/forms/PhoneField.tsx

@@ -21,6 +21,7 @@ export const PhoneField = (props: {
   mask?: (args: any) => React.JSX.Element
   dataTestId?: string
 }) => {
+  const idOrName = props.id || props.name
   const labelClasses = []
   if (props.caps) labelClasses.push("text__caps-spaced")
   if (props.readerOnly) labelClasses.push("sr-only")
@@ -32,14 +33,14 @@ export const PhoneField = (props: {
    */
   const controllerProps = {
     className: "input",
-    id: props.id,
+    id: idOrName,
     name: props.name,
     placeholder: props.placeholder,
     defaultValue: props.defaultValue || "",
     disabled: props.disabled,
     control: props.control,
-    "aria-describedby": `${props.id ? `${props.id}-error` : ""} ${
-      props.subNote && props.id ? `${props.id}-sub-note` : ""
+    "aria-describedby": `${props.error ? `${idOrName}-error` : ""} ${
+      props.subNote ? `${idOrName}-sub-note` : ""
     }`,
     "aria-invalid": !!props.error,
     rules: {
@@ -60,7 +61,7 @@ export const PhoneField = (props: {
   return (
     <div className={"field " + (props.error ? "error" : "")}>
       {props.label && (
-        <label className={labelClasses.join(" ")} htmlFor={props.id}>
+        <label className={labelClasses.join(" ")} htmlFor={idOrName}>
           {props.label}
         </label>
       )}
@@ -72,11 +73,11 @@ export const PhoneField = (props: {
         )}
       </div>
       {props.subNote && (
-        <p id={`${props.id || ""}-sub-note`} className="field-sub-note">
+        <p id={`${idOrName}-sub-note`} className="field-sub-note">
           {props.subNote}
         </p>
       )}
-      <ErrorMessage id={`${props.id || ""}-error`} error={props.error}>
+      <ErrorMessage id={`${idOrName}-error`} error={props.error}>
         {props.errorMessage}
       </ErrorMessage>
     </div>

src/forms/PhoneMask.tsx

@@ -4,6 +4,7 @@ import MaskedInput from "react-text-mask"
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PhoneMask = React.forwardRef((props: any, ref: any) => {
   const { value, onChange, name, disabled, placeholder } = props
+  const inputId = props.id ?? name
 
   return (
     <>
@@ -13,7 +14,7 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
         type="tel"
         placeholder={placeholder ?? ""}
         guide={false}
-        id={name}
+        id={inputId}
         value={value}
         name={name}
         disabled={disabled}
@@ -23,7 +24,6 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
           onChange && onChange(e)
         }}
         ref={ref}
-        aria-labelledby={"phone-label"}
         aria-describedby={props["aria-describedby"]}
         aria-invalid={props["aria-invalid"]}
       />

src/forms/Select.tsx

@@ -50,18 +50,22 @@ export const Select = ({
   subNote,
   dataTestId,
 }: SelectProps) => {
+  const idOrName = id || name
+
   return (
     <div className={`field ${error ? "error" : ""}`}>
-      <label className={labelClassName} htmlFor={id}>
+      <label className={labelClassName} htmlFor={idOrName}>
         {label}
       </label>
       <div className={controlClassName}>
         <select
           className="input"
-          id={id || name}
+          id={idOrName}
           name={name}
           data-testid={dataTestId}
-          aria-describedby={describedBy ? describedBy : `${id || name}-error`}
+          aria-describedby={`${describedBy ? describedBy : ""}  ${
+            error ? `${idOrName}-error` : ""
+          } ${subNote ? `${idOrName}-sub-note` : ""}`}
           aria-invalid={!!error || false}
           ref={register && register(validation)}
           disabled={disabled}
@@ -76,13 +80,17 @@ export const Select = ({
           <FormOptions options={options} keyPrefix={keyPrefix} />
         </select>
       </div>
-      {subNote && <p className="field-sub-note">{subNote}</p>}
+      {subNote && (
+        <p className="field-sub-note" id={`${idOrName}-sub-note`}>
+          {subNote}
+        </p>
+      )}
       {error && errorMessage ? (
-        <ErrorMessage id={`${id || name}-error`} error={error}>
+        <ErrorMessage id={`${idOrName}-error`} error={error}>
           {errorMessage}
         </ErrorMessage>
       ) : (
-        <span id={`${id || name}-error`}></span>
+        <span id={`${idOrName}-error`}></span>
       )}
     </div>
   )