From 4657ce362f2645b9ca29248eb6b036ffaba90e47 Mon Sep 17 00:00:00 2001
From: Kieren Powell <kieren@oneblink.io>
Date: Thu, 2 Apr 2026 10:33:41 +1100
Subject: [PATCH] AP-7894 # Revert to <label>, remove htmlFor

---
 .../renderer/FormElementLabelContainer.tsx    | 25 ++++++++-----------
 .../FormElementRepeatableSet.tsx              |  2 ++
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/renderer/FormElementLabelContainer.tsx b/src/components/renderer/FormElementLabelContainer.tsx
index 0f9e6984..158f03c8 100644
--- a/src/components/renderer/FormElementLabelContainer.tsx
+++ b/src/components/renderer/FormElementLabelContainer.tsx
@@ -12,7 +12,7 @@ function FormElementLabelContainer({
   required,
   children,
   leading,
-  associateLabelWithInput = true,
+  associateLabelWithInput = true
 }: {
   className: string
   element: FormTypes.FormElementBase
@@ -20,27 +20,22 @@ function FormElementLabelContainer({
   required: boolean
   children: React.ReactNode
   leading?: React.ReactNode
-  /** When false, render the title as a span (no htmlFor), e.g. repeatable sets with no single control. */
   associateLabelWithInput?: boolean
 }) {
-  const labelId = `${id}-label`
-  const labelClassName = clsx('ob-label', {
-    'ob-label__required is-required': required,
-  })
 
   return (
     <div className={clsx('ob-form__element', className)}>
       <div className="label ob-label__container">
         {leading}
-        {associateLabelWithInput ? (
-          <label className={labelClassName} htmlFor={id} id={labelId}>
-            {element.label}
-          </label>
-        ) : (
-          <span className={labelClassName} id={labelId}>
-            {element.label}
-          </span>
-        )}
+        <label
+          className={clsx('ob-label', {
+            'ob-label__required is-required': required,
+          })}
+          htmlFor={associateLabelWithInput ? id : undefined}
+          id={`${id}-label`}
+        >
+          {element.label}
+        </label>
         {element.hint &&
           (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (
             <HintTooltip hint={element.hint} inputId={id} />
diff --git a/src/form-elements/FormElementRepeatableSet.tsx b/src/form-elements/FormElementRepeatableSet.tsx
index e19bc2b7..a46b0f50 100644
--- a/src/form-elements/FormElementRepeatableSet.tsx
+++ b/src/form-elements/FormElementRepeatableSet.tsx
@@ -408,6 +408,7 @@ function FormElementRepeatableSet({
             onAdd={() => handleAddEntry(0)}
             element={element}
             classes={['ob-button-repeatable-set-layout__multiple-add-buttons']}
+            id={id}
           />
         )}
         {entries.map((entry, index) => {
@@ -445,6 +446,7 @@ function FormElementRepeatableSet({
             <AddButton
               onAdd={() => handleAddEntry(entries.length)}
               element={element}
+              id={id}
             />
           )}
         {(isDirty || displayValidationMessage) &&