fix(emcn): let a custom modal field associate its hint with the control it wraps

`ChipModalField` computes `aria-required`/`aria-invalid`/`aria-describedby` from
its own state, but `type='custom'` returned its children untouched — so the
`hint` and `error` text it renders was visible and never announced. The field
cannot apply the ARIA itself here: a custom child may be a bare input or a
wrapper several levels above one, which is the same reason `associatesLabel`
already excludes custom from the label's `htmlFor`.

Adds a function form for custom children that receives the ARIA, so the
consumer — which knows where focus lands — attaches it. Existing `ReactNode`
children are unaffected; all five current custom-field call sites keep working
untouched.

Uses it for the Atlassian API token field, whose coverage hint this branch had
just relocated onto a custom field.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx

@@ -504,20 +504,23 @@ function AtlassianServiceAccountModal({
       </ChipModalHeader>
       <ChipModalBody>
         <ChipModalField type='custom' title='API token' required hint={ATLASSIAN_COVERAGE_HINT}>
-          <SecretInput
-            value={apiToken}
-            onChange={(value) => {
-              setApiToken(value)
-              if (error) setError(null)
-            }}
-            placeholder='Paste API token'
-            name='atlassian_service_account_api_token'
-            autoComplete='new-password'
-            autoCorrect='off'
-            autoCapitalize='off'
-            data-lpignore='true'
-            data-form-type='other'
-          />
+          {(aria) => (
+            <SecretInput
+              {...aria}
+              value={apiToken}
+              onChange={(value) => {
+                setApiToken(value)
+                if (error) setError(null)
+              }}
+              placeholder='Paste API token'
+              name='atlassian_service_account_api_token'
+              autoComplete='new-password'
+              autoCorrect='off'
+              autoCapitalize='off'
+              data-lpignore='true'
+              data-form-type='other'
+            />
+          )}
         </ChipModalField>
 
         <ChipModalField

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -549,9 +549,28 @@ export interface ChipModalEmailsFieldProps extends ChipModalFieldBaseProps {
   placeholder?: string
 }
 
+/**
+ * ARIA the field derives from its own state and renders elsewhere in the row —
+ * the `hint`/`error` paragraph ids, plus `required`/`invalid` flags.
+ */
+export interface ChipModalFieldAria {
+  'aria-required'?: boolean
+  'aria-invalid'?: boolean
+  'aria-describedby'?: string
+}
+
 interface ChipModalCustomFieldProps extends ChipModalFieldBaseProps {
   type: 'custom'
-  children: React.ReactNode
+  /**
+   * Arbitrary JSX, or a function receiving the field's {@link ChipModalFieldAria}.
+   *
+   * The owned control types wire this ARIA themselves, but a custom field can
+   * hold anything — a bare input, or a wrapper several levels above one — so
+   * the field cannot know which element should carry it. Use the function form
+   * whenever the child renders a focusable control, or its `hint`/`error` text
+   * is rendered but never announced.
+   */
+  children: React.ReactNode | ((aria: ChipModalFieldAria) => React.ReactNode)
 }
 
 export type ChipModalFieldProps =
@@ -718,7 +737,7 @@ function renderChipModalControl(
     case 'emails':
       return <ChipModalEmailsControl {...props} id={id} errorId={errorId} />
     case 'custom':
-      return props.children
+      return typeof props.children === 'function' ? props.children(aria) : props.children
   }
 }