From dd71f33934a0aec5a523d89a449d13665376c749 Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 1 May 2026 18:38:53 +0200
Subject: [PATCH 1/4] feat(force-value) - improve to use form description
 component

---
 example/src/Onboarding.tsx                    |  4 ++
 .../form/fields/ForcedValueField.tsx          | 72 ++++++-------------
 .../shared/zendesk-drawer/HelpCenter.tsx      |  5 +-
 3 files changed, 28 insertions(+), 53 deletions(-)

diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx
index 76a3a3553..7f3ea2ebc 100644
--- a/example/src/Onboarding.tsx
+++ b/example/src/Onboarding.tsx
@@ -436,6 +436,10 @@ const OnboardingWithProps = ({
             // Nigeria
             contract_details: 2,
           },
+          NLD: {
+            // Netherlands
+            contract_details: 2,
+          },
           NOR: {
             // Norway
             contract_details: 2,
diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx
index 8e77f0572..6c1da957f 100644
--- a/src/components/form/fields/ForcedValueField.tsx
+++ b/src/components/form/fields/ForcedValueField.tsx
@@ -1,39 +1,9 @@
 import { useFormContext } from 'react-hook-form';
 import { sanitizeHtml } from '@/src/lib/utils';
 import { useEffect } from 'react';
-import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton';
-
-const Description = ({
-  name,
-  description,
-  helpCenter,
-}: {
-  name: string;
-  description: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
-}) => {
-  return (
-    <span>
-      <span
-        className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(description) }}
-      />
-      {helpCenter?.callToAction && helpCenter?.id && (
-        <ZendeskTriggerButton
-          className='RemoteFlows__ForcedValue__HelpCenterLink'
-          zendeskId={helpCenter.id}
-        >
-          {helpCenter.callToAction}
-        </ZendeskTriggerButton>
-      )}
-    </span>
-  );
-};
+import { HelpCenterDataProps } from '@/src/types/fields';
+import { FormDescription } from '@/src/components/ui/form';
+import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
 
 export type ForcedValueFieldProps = {
   name: string;
@@ -44,12 +14,7 @@ export type ForcedValueFieldProps = {
     description?: string;
   };
   label: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
+  helpCenter?: HelpCenterDataProps;
 };
 
 export function ForcedValueField({
@@ -61,11 +26,9 @@ export function ForcedValueField({
   helpCenter,
 }: ForcedValueFieldProps) {
   const { setValue } = useFormContext();
-  const descriptionSanitized = sanitizeHtml(
-    statement?.description || description,
-  );
+  const forcedValueDescription = statement?.description || description;
 
-  const titleSanitized = statement?.title
+  const forcedValueTitle = statement?.title
     ? sanitizeHtml(statement?.title)
     : sanitizeHtml(label);
 
@@ -74,7 +37,7 @@ export function ForcedValueField({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const isHiddenValue = !descriptionSanitized && !statement?.title;
+  const isHiddenValue = !forcedValueDescription && !statement?.title;
 
   if (isHiddenValue) {
     return null;
@@ -82,19 +45,26 @@ export function ForcedValueField({
 
   return (
     <div>
-      {titleSanitized && (
+      {forcedValueTitle && (
         <p
           className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
           dangerouslySetInnerHTML={{
-            __html: titleSanitized,
+            __html: forcedValueTitle,
           }}
         />
       )}
-      <Description
-        name={name}
-        description={descriptionSanitized}
-        helpCenter={helpCenter}
-      />
+      <FormDescription
+        as='span'
+        className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
+        helpCenter={
+          <HelpCenter
+            className='RemoteFlows__ForcedValue__HelpCenterLink'
+            helpCenter={helpCenter}
+          />
+        }
+      >
+        {forcedValueDescription}
+      </FormDescription>
     </div>
   );
 }
diff --git a/src/components/shared/zendesk-drawer/HelpCenter.tsx b/src/components/shared/zendesk-drawer/HelpCenter.tsx
index f0fe47a6f..e088df73a 100644
--- a/src/components/shared/zendesk-drawer/HelpCenter.tsx
+++ b/src/components/shared/zendesk-drawer/HelpCenter.tsx
@@ -3,15 +3,16 @@ import { HelpCenterDataProps } from '@/src/types/fields';
 
 type HelpCenterProps = {
   helpCenter?: HelpCenterDataProps;
+  className?: string;
 };
 
-export function HelpCenter({ helpCenter }: HelpCenterProps) {
+export function HelpCenter({ helpCenter, className }: HelpCenterProps) {
   if (!helpCenter || !helpCenter.id || !helpCenter.callToAction) {
     return null;
   }
 
   return (
-    <ZendeskTriggerButton zendeskId={helpCenter.id}>
+    <ZendeskTriggerButton zendeskId={helpCenter.id} className={className}>
       {helpCenter.callToAction}
     </ZendeskTriggerButton>
   );

From 57e5e0950b5654d06c6bbf00e6bb8c447c0eeaa5 Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 1 May 2026 19:05:20 +0200
Subject: [PATCH 2/4] fix description

---
 .../form/fields/ForcedValueField.tsx          |  6 ++---
 src/components/ui/form.tsx                    | 26 +++++++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx
index 6c1da957f..7a94a7fea 100644
--- a/src/components/form/fields/ForcedValueField.tsx
+++ b/src/components/form/fields/ForcedValueField.tsx
@@ -2,7 +2,7 @@ import { useFormContext } from 'react-hook-form';
 import { sanitizeHtml } from '@/src/lib/utils';
 import { useEffect } from 'react';
 import { HelpCenterDataProps } from '@/src/types/fields';
-import { FormDescription } from '@/src/components/ui/form';
+import { BaseFormDescription as Description } from '@/src/components/ui/form';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
 
 export type ForcedValueFieldProps = {
@@ -53,7 +53,7 @@ export function ForcedValueField({
           }}
         />
       )}
-      <FormDescription
+      <Description
         as='span'
         className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
         helpCenter={
@@ -64,7 +64,7 @@ export function ForcedValueField({
         }
       >
         {forcedValueDescription}
-      </FormDescription>
+      </Description>
     </div>
   );
 }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index e485d3814..377291f0f 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -131,26 +131,26 @@ const FormControl = React.forwardRef<
 
 FormControl.displayName = 'FormControl';
 
-function FormDescription<T extends React.ElementType = 'p'>({
+export function BaseFormDescription<T extends React.ElementType = 'p'>({
   helpCenter,
   className,
   children,
   as,
+  id,
   ...props
 }: React.ComponentProps<'p'> & {
   helpCenter?: React.ReactNode;
   children?: React.ReactNode | (() => React.ReactNode);
   as?: T;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>) {
-  const { formDescriptionId } = useFormField();
+  id?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'id'>) {
   const Component = as || 'p';
-
   if (typeof children === 'string') {
     return (
       <>
         <Component
           data-slot='form-description'
-          id={formDescriptionId}
+          id={id}
           className={cn('text-base-color text-xs', className)}
           data-sanitized='true'
           {...props}
@@ -161,13 +161,12 @@ function FormDescription<T extends React.ElementType = 'p'>({
       </>
     );
   }
-
   return (
     <Component
       data-slot='form-description'
-      id={formDescriptionId}
-      data-sanitized='false'
+      id={id}
       className={cn('text-base-color text-xs', className)}
+      data-sanitized='false'
       {...props}
     >
       {typeof children === 'function' ? children() : children}
@@ -176,6 +175,17 @@ function FormDescription<T extends React.ElementType = 'p'>({
   );
 }
 
+function FormDescription<T extends React.ElementType = 'p'>({
+  ...props
+}: React.ComponentProps<'p'> & {
+  helpCenter?: React.ReactNode;
+  children?: React.ReactNode | (() => React.ReactNode);
+  as?: T;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'id'>) {
+  const { formDescriptionId } = useFormField();
+  return <BaseFormDescription id={formDescriptionId} {...props} />;
+}
+
 function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? '') : props.children;

From 6b377bb86bb5e93218a6d32a6b6368aea755eed0 Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 1 May 2026 19:10:48 +0200
Subject: [PATCH 3/4] fix(force-value-fields) - fix semantics a bit

---
 src/components/form/fields/ForcedValueField.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx
index 7a94a7fea..b299e799a 100644
--- a/src/components/form/fields/ForcedValueField.tsx
+++ b/src/components/form/fields/ForcedValueField.tsx
@@ -32,6 +32,9 @@ export function ForcedValueField({
     ? sanitizeHtml(statement?.title)
     : sanitizeHtml(label);
 
+  const titleId = `forced-value-${name}-title`;
+  const descriptionId = `forced-value-${name}-description`;
+
   useEffect(() => {
     setValue(name, value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -44,9 +47,14 @@ export function ForcedValueField({
   }
 
   return (
-    <div>
+    <div
+      role='group'
+      aria-labelledby={forcedValueTitle ? titleId : undefined} // ✅ Safe
+      aria-describedby={forcedValueDescription ? descriptionId : undefined}
+    >
       {forcedValueTitle && (
         <p
+          id={titleId}
           className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
           dangerouslySetInnerHTML={{
             __html: forcedValueTitle,
@@ -55,6 +63,7 @@ export function ForcedValueField({
       )}
       <Description
         as='span'
+        id={descriptionId}
         className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
         helpCenter={
           <HelpCenter

From 5611ddf0bcf89f1d505ccac1baae20fe755a7388 Mon Sep 17 00:00:00 2001
From: Gabriel Garcia <ggarciaseco@gmail.com>
Date: Fri, 1 May 2026 19:11:27 +0200
Subject: [PATCH 4/4] fix semantics

---
 src/components/form/fields/ForcedValueField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx
index b299e799a..fb43648e6 100644
--- a/src/components/form/fields/ForcedValueField.tsx
+++ b/src/components/form/fields/ForcedValueField.tsx
@@ -49,7 +49,7 @@ export function ForcedValueField({
   return (
     <div
       role='group'
-      aria-labelledby={forcedValueTitle ? titleId : undefined} // ✅ Safe
+      aria-labelledby={forcedValueTitle ? titleId : undefined}
       aria-describedby={forcedValueDescription ? descriptionId : undefined}
     >
       {forcedValueTitle && (