fix: move radio and checkbox buttons out of the label dom

Closes #3688
bpmn-io · Sep 12, 2024 · 6325f64 · 6325f64
1 parent 51b1f3a
commit 6325f64
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
@@ -283,10 +283,15 @@
   opacity: 1;
 }
 
+.fjs-container .fjs-inline-label {
+  display: flex;
+}
+
 .fjs-container .fjs-form-field-label {
   display: flex;
   align-items: center;
   white-space: nowrap;
+  overflow: hidden;
   color: var(--color-text-light);
 }
 

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js b/packages/form-js-viewer/src/render/components/form-fields/Checkbox.js
@@ -26,7 +26,7 @@ export function Checkbox(props) {
 
   return (
     <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}>
-      <Label htmlFor={domId} label={label} required={required}>
+      <div class="fjs-inline-label">
         <input
           checked={value}
           class="fjs-input"
@@ -41,7 +41,8 @@ export function Checkbox(props) {
           aria-invalid={errors.length > 0}
           aria-describedby={[descriptionId, errorMessageId].join(' ')}
         />
-      </Label>
+        <Label htmlFor={domId} label={label} required={required} />
+      </div>
       <Description id={descriptionId} description={description} />
       <Errors id={errorMessageId} errors={errors} />
     </div>

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -73,13 +73,7 @@ export function Checklist(props) {
           const isChecked = hasEqualValue(o.value, values);
 
           return (
-            <Label
-              htmlFor={itemDomId}
-              label={o.label}
-              class={classNames({
-                'fjs-checked': isChecked,
-              })}
-              required={false}>
+            <div className="fjs-inline-label" key={index}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -94,7 +88,15 @@ export function Checklist(props) {
                 aria-invalid={errors.length > 0}
                 aria-describedby={[descriptionId, errorMessageId].join(' ')}
               />
-            </Label>
+              <Label
+                htmlFor={itemDomId}
+                label={o.label}
+                class={classNames({
+                  'fjs-checked': isChecked,
+                })}
+                required={false}
+              />
+            </div>
           );
         })}
       <Description id={descriptionId} description={description} />

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -69,12 +69,7 @@ export function Radio(props) {
           const isChecked = isEqual(option.value, value);
 
           return (
-            <Label
-              htmlFor={itemDomId}
-              key={index}
-              label={option.label}
-              class={classNames({ 'fjs-checked': isChecked })}
-              required={false}>
+            <div className="fjs-inline-label" key={index}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -89,7 +84,13 @@ export function Radio(props) {
                 required={required}
                 aria-invalid={errors.length > 0}
               />
-            </Label>
+              <Label
+                htmlFor={itemDomId}
+                label={option.label}
+                class={classNames({ 'fjs-checked': isChecked })}
+                required={false}
+              />
+            </div>
           );
         })}
       <Description id={descriptionId} description={description} />