From d2957c12a5066ceffe1980ece4e6188b154f6443 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 12:13:55 +0300
Subject: [PATCH 1/9] DRYD-1923: added htmlFor and id props to Label; extended
 normalizeLabel to clone pre-built Labels including the new props; extended
 labelable to pass htmlFor and id to normalizeLabel;

---
 src/components/Label.jsx       | 10 +++++++---
 src/enhancers/labelable.jsx    | 10 +++++++++-
 src/helpers/normalizeLabel.jsx | 25 +++++++++++++++++++++++--
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/Label.jsx b/src/components/Label.jsx
index 9e47cbf..46c5733 100644
--- a/src/components/Label.jsx
+++ b/src/components/Label.jsx
@@ -6,12 +6,16 @@ const propTypes = {
   children: PropTypes.node,
   readOnly: PropTypes.bool,
   required: PropTypes.bool,
+  htmlFor: PropTypes.string,
+  id: PropTypes.string,
 };
 
 const defaultProps = {
   children: undefined,
   readOnly: undefined,
   required: undefined,
+  htmlFor: undefined,
+  id: undefined,
 };
 
 /**
@@ -22,14 +26,14 @@ export default function Label(props) {
     children,
     readOnly,
     required,
+    htmlFor,
+    id,
   } = props;
 
   const className = (required && !readOnly) ? styles.required : styles.common;
 
   return (
-    // FIXME: Set the htmlFor prop to associate the labeled control.
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={className}>
+    <label className={className} htmlFor={htmlFor} id={id}>
       {children}
     </label>
   );
diff --git a/src/enhancers/labelable.jsx b/src/enhancers/labelable.jsx
index 5e39ece..8f9d6d5 100644
--- a/src/enhancers/labelable.jsx
+++ b/src/enhancers/labelable.jsx
@@ -45,9 +45,17 @@ export default function labelable(BaseComponent) {
 
     const {
       readOnly,
+      id,
     } = props;
 
-    const normalizedLabel = normalizeLabel(label, { required, readOnly });
+    const labelId = id ? `${id}-label` : undefined;
+
+    const normalizedLabel = normalizeLabel(label, {
+      required,
+      readOnly,
+      htmlFor: id,
+      id: labelId,
+    });
 
     const baseComponent = (
       // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/helpers/normalizeLabel.jsx b/src/helpers/normalizeLabel.jsx
index 717ee33..0a399d2 100644
--- a/src/helpers/normalizeLabel.jsx
+++ b/src/helpers/normalizeLabel.jsx
@@ -2,6 +2,27 @@ import React from 'react';
 import Label from '../components/Label';
 
 export default function normalizeLabel(label, props) {
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return (label && typeof label === 'string') ? <Label {...props}>{label}</Label> : label;
+  if (label && typeof label === 'string') {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Label {...props}>{label}</Label>;
+  }
+
+  if (props && React.isValidElement(label) && label.type === Label) {
+    const { htmlFor, id } = props;
+    const overrides = {};
+
+    if (htmlFor && !label.props.htmlFor) {
+      overrides.htmlFor = htmlFor;
+    }
+
+    if (id && !label.props.id) {
+      overrides.id = id;
+    }
+
+    if (Object.keys(overrides).length > 0) {
+      return React.cloneElement(label, overrides);
+    }
+  }
+
+  return label;
 }

From 4f71c2f20374b8bdbf229a1c25f423888d79bade Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 12:40:20 +0300
Subject: [PATCH 2/9] DRYD-1923: added label prop to CustomCompoundInput;
 Render it as legend; updated labelable to pass label as an input when
 useLegend flag is true instead of rendering it;

---
 src/components/CustomCompoundInput.jsx       | 18 ++++++++++++++
 src/enhancers/labelable.jsx                  | 26 +++++++++++++++-----
 test/specs/components/CompoundInput.spec.jsx | 15 +++++------
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/components/CustomCompoundInput.jsx b/src/components/CustomCompoundInput.jsx
index a322649..b61a9ed 100644
--- a/src/components/CustomCompoundInput.jsx
+++ b/src/components/CustomCompoundInput.jsx
@@ -6,11 +6,13 @@ import get from 'lodash/get';
 import { getPath, pathPropType } from '../helpers/pathHelpers';
 import { isInput } from '../helpers/inputHelpers';
 import styles from '../../styles/cspace-input/CompoundInput.css';
+import Label from './Label';
 
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   defaultChildSubpath: pathPropType,
+  label: PropTypes.node,
   name: PropTypes.string,
   // TODO: Stop using propTypes in isInput. Until then, these unused props need to be declared so
   // this component is recognized as an input.
@@ -29,6 +31,7 @@ const defaultProps = {
   children: undefined,
   className: undefined,
   defaultChildSubpath: undefined,
+  label: undefined,
   name: undefined,
   parentPath: undefined,
   subpath: undefined,
@@ -106,6 +109,7 @@ export default class CustomCompoundInput extends Component {
     const {
       children,
       className,
+      label,
       name,
       readOnly,
     } = this.props;
@@ -114,11 +118,24 @@ export default class CustomCompoundInput extends Component {
       [styles.readOnly]: readOnly,
     });
 
+    let legend = null;
+
+    if (React.isValidElement(label) && label.type === Label) {
+      // Extract the label's children, className, id
+      // and render it as legend instead of an orphaned label
+      legend = (
+        <legend className={label.props.className} id={label.props.id}>
+          {label.props.children}
+        </legend>
+      );
+    }
+
     return (
       <fieldset
         className={classes}
         data-name={name}
       >
+        {legend}
         {this.decorateInputs(children)}
       </fieldset>
     );
@@ -127,3 +144,4 @@ export default class CustomCompoundInput extends Component {
 
 CustomCompoundInput.propTypes = propTypes;
 CustomCompoundInput.defaultProps = defaultProps;
+CustomCompoundInput.useLegend = true;
diff --git a/src/enhancers/labelable.jsx b/src/enhancers/labelable.jsx
index 8f9d6d5..60697a6 100644
--- a/src/enhancers/labelable.jsx
+++ b/src/enhancers/labelable.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import normalizeLabel from '../helpers/normalizeLabel';
+import Label from '../components/Label';
 
 /**
  * Makes an input component labelable. Returns an enhanced component that accepts a label prop. If
@@ -8,6 +9,11 @@ import normalizeLabel from '../helpers/normalizeLabel';
  * label. If the label is a string, it is wrapped in a Label; otherwise, it is rendered as given.
  * If no label is supplied, the base component is returned unchanged. A msgkey prop is also
  * accepted, but has no effect. It may be used by preprocessors to generate a label.
+ * If BaseComponent contains a static `useLegend = true` and the label is a Label element
+ * (or a string that is normalized to one), the label is forwarded to BaseComponent as the
+ *  `label` prop The BaseComponent is expected to render the label as a `<legend>`
+ *  inside its own `<fieldset>`.
+ *
  * @param {string|function} BaseComponent - The component to enhance.
  * @returns {function} The enhanced component.
  */
@@ -57,19 +63,27 @@ export default function labelable(BaseComponent) {
       id: labelId,
     });
 
-    const baseComponent = (
+    if (!normalizedLabel) {
       // eslint-disable-next-line react/jsx-props-no-spreading
-      <BaseComponent {...remainingProps} />
-    );
+      return <BaseComponent {...remainingProps} />;
+    }
 
-    if (!normalizedLabel) {
-      return baseComponent;
+    if (
+      BaseComponent.useLegend
+      && React.isValidElement(normalizedLabel)
+      && normalizedLabel.type === Label
+    ) {
+      return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <BaseComponent {...remainingProps} label={normalizedLabel} />
+      );
     }
 
     return (
       <div>
         {normalizedLabel}
-        {baseComponent}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <BaseComponent {...remainingProps} />
       </div>
     );
   }
diff --git a/test/specs/components/CompoundInput.spec.jsx b/test/specs/components/CompoundInput.spec.jsx
index 64bb88d..8627292 100644
--- a/test/specs/components/CompoundInput.spec.jsx
+++ b/test/specs/components/CompoundInput.spec.jsx
@@ -57,15 +57,16 @@ describe('CompoundInput', () => {
         </CompoundInput>, this.container,
       );
 
+      const legends = this.container.querySelectorAll('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Person');
-      labels[1].textContent.should.equal('First name');
-      labels[2].textContent.should.equal('Last name');
-      labels[3].textContent.should.equal('Address');
-      labels[4].textContent.should.equal('Street');
-      labels[5].textContent.should.equal('City');
-      labels[6].textContent.should.equal('State');
+      legends[0].textContent.should.equal('Person');
+      legends[1].textContent.should.equal('Address');
+      labels[0].textContent.should.equal('First name');
+      labels[1].textContent.should.equal('Last name');
+      labels[2].textContent.should.equal('Street');
+      labels[3].textContent.should.equal('City');
+      labels[4].textContent.should.equal('State');
 
       const inputs = this.container.querySelectorAll('input');
 

From b799ddbe27295d20d59b9fe35130351e1ee6def7 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 12:56:44 +0300
Subject: [PATCH 3/9] DRYD-1923: added id prop to RepeatingInput; changed
 renderHeader so that it renders a legend instead of an orphaned label; added
 id prop to children elements; updated repeatable to pass id as an input;

---
 src/components/RepeatingInput.jsx             | 25 ++++++++++++++++++-
 src/enhancers/repeatable.jsx                  |  1 +
 test/specs/components/RepeatingInput.spec.jsx |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/RepeatingInput.jsx b/src/components/RepeatingInput.jsx
index 752e541..1b5817a 100644
--- a/src/components/RepeatingInput.jsx
+++ b/src/components/RepeatingInput.jsx
@@ -8,9 +8,11 @@ import { getPath, pathPropType } from '../helpers/pathHelpers';
 import miniButtonContainerStyles from '../../styles/cspace-input/MiniButtonContainer.css';
 import moveToTopButtonStyles from '../../styles/cspace-input/MoveToTopButton.css';
 import styles from '../../styles/cspace-input/RepeatingInput.css';
+import Label from './Label';
 
 const propTypes = {
   children: PropTypes.node,
+  id: PropTypes.string,
   name: PropTypes.string,
   /* eslint-disable react/no-unused-prop-types */
   parentPath: pathPropType,
@@ -38,6 +40,7 @@ const propTypes = {
 
 const defaultProps = {
   children: undefined,
+  id: undefined,
   name: undefined,
   parentPath: undefined,
   subpath: undefined,
@@ -77,7 +80,23 @@ const normalizeValue = (value) => {
   return normalized;
 };
 
-const renderHeader = (label) => label;
+const renderHeader = (label) => {
+  if (!label) {
+    return null;
+  }
+
+  if (React.isValidElement(label) && label.type === Label) {
+    // Extract the label's children, className, id
+    // and render it as legend instead of an orphaned label
+    return (
+      <legend className={label.props.className} id={label.props.id}>
+        {label.props.children}
+      </legend>
+    );
+  }
+
+  return <legend>{label}</legend>;
+};
 
 export default class RepeatingInput extends Component {
   constructor(props) {
@@ -252,6 +271,7 @@ export default class RepeatingInput extends Component {
 
     const template = React.Children.only(children);
     const normalizedValue = normalizeValue(value);
+    const templateId = template.props.id;
 
     return normalizedValue.map((instanceValue, index, list) => {
       const instanceName = `${index}`;
@@ -264,6 +284,7 @@ export default class RepeatingInput extends Component {
         name: instanceName,
         parentPath: getPath(this.props),
         value: instanceValue,
+        id: templateId ? `${templateId}-${instanceName}` : undefined,
         // The template is expected to accept an onCommit prop.
         onCommit: this.handleInstanceCommit,
       };
@@ -347,6 +368,7 @@ export default class RepeatingInput extends Component {
   render() {
     const {
       asText,
+      id,
       name,
       readOnly,
     } = this.props;
@@ -387,6 +409,7 @@ export default class RepeatingInput extends Component {
       <fieldset
         className={className}
         data-name={name}
+        id={id}
       >
         {isLabelEmbedded ? null : renderHeader(label)}
 
diff --git a/src/enhancers/repeatable.jsx b/src/enhancers/repeatable.jsx
index 310029a..8572a8b 100644
--- a/src/enhancers/repeatable.jsx
+++ b/src/enhancers/repeatable.jsx
@@ -73,6 +73,7 @@ export default function repeatable(BaseComponent) {
         onCommit={onCommit}
         onMoveInstance={onMoveInstance}
         onRemoveInstance={onRemoveInstance}
+        id={baseProps.id}
       >
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <BaseComponent {...baseProps} />
diff --git a/test/specs/components/RepeatingInput.spec.jsx b/test/specs/components/RepeatingInput.spec.jsx
index 250ba9b..ecfacd6 100644
--- a/test/specs/components/RepeatingInput.spec.jsx
+++ b/test/specs/components/RepeatingInput.spec.jsx
@@ -264,7 +264,7 @@ describe('RepeatingInput', () => {
       </RepeatingInput>, this.container,
     );
 
-    this.container.querySelector('label').textContent.should.equal('Inner label');
+    this.container.querySelector('legend').textContent.should.equal('Inner label');
   });
 
   it('should render a repeating CustomCompoundInput', function test() {

From 539a7c4e3c2bd2bdd57bb2bf7f43d935b67230a5 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 15:20:58 +0300
Subject: [PATCH 4/9] DRYD-1923: render label as legend in
 TabularCompoundInput;

---
 src/components/TabularCompoundInput.jsx      | 40 +++++++++++++++-----
 test/specs/components/CompoundInput.spec.jsx | 17 +++++----
 test/specs/index.spec.jsx                    |  7 ++--
 3 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/components/TabularCompoundInput.jsx b/src/components/TabularCompoundInput.jsx
index eef3f9c..fa816ec 100644
--- a/src/components/TabularCompoundInput.jsx
+++ b/src/components/TabularCompoundInput.jsx
@@ -6,6 +6,7 @@ import InputTableHeader from './InputTableHeader';
 import labelable from '../enhancers/labelable';
 import repeatable from '../enhancers/repeatable';
 import { getPath } from '../helpers/pathHelpers';
+import Label from './Label';
 
 const BaseComponent = repeatable(labelable(CustomCompoundInput));
 
@@ -15,6 +16,7 @@ const propTypes = {
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ...BaseComponent.propTypes,
   children: PropTypes.node,
+  label: PropTypes.node,
   repeating: PropTypes.bool,
   sortableFields: PropTypes.objectOf(PropTypes.bool),
   onSortInstances: PropTypes.func,
@@ -23,6 +25,7 @@ const propTypes = {
 
 const defaultProps = {
   children: undefined,
+  label: undefined,
   repeating: undefined,
   sortableFields: undefined,
   onSortInstances: undefined,
@@ -49,6 +52,7 @@ export default class TabularCompoundInput extends Component {
   render() {
     const {
       children,
+      label,
       repeating,
       renderChildInputLabel,
       sortableFields,
@@ -66,20 +70,36 @@ export default class TabularCompoundInput extends Component {
       </InputTableHeader>
     );
 
+    let legend = null;
+
+    if (React.isValidElement(label) && label.type === Label) {
+      // Extract the label's children, className, id
+      // and render it as legend instead of an orphaned label
+      legend = (
+        <legend className={label.props.className} id={label.props.id}>
+          {label.props.children}
+        </legend>
+      );
+    }
+
     return (
-      <BaseComponent
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...remainingProps}
-        label={tableHeader}
-        repeating={repeating}
-      >
-        <InputTableRow embedded={repeating}>
-          {children}
-        </InputTableRow>
-      </BaseComponent>
+      <>
+        {legend}
+        <BaseComponent
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...remainingProps}
+          label={tableHeader}
+          repeating={repeating}
+        >
+          <InputTableRow embedded={repeating}>
+            {children}
+          </InputTableRow>
+        </BaseComponent>
+      </>
     );
   }
 }
 
 TabularCompoundInput.propTypes = propTypes;
 TabularCompoundInput.defaultProps = defaultProps;
+TabularCompoundInput.useLegend = true;
diff --git a/test/specs/components/CompoundInput.spec.jsx b/test/specs/components/CompoundInput.spec.jsx
index 8627292..aba4723 100644
--- a/test/specs/components/CompoundInput.spec.jsx
+++ b/test/specs/components/CompoundInput.spec.jsx
@@ -89,7 +89,7 @@ describe('CompoundInput', () => {
       result.type.displayName.should.contain('TabularCompoundInput');
     });
 
-    it('should render labels and values properly', function test() {
+    it('should render legend, labels and values properly', function test() {
       const value = {
         firstName: 'John',
         lastName: 'Doe',
@@ -113,15 +113,16 @@ describe('CompoundInput', () => {
         </CompoundInput>, this.container,
       );
 
+      const legend = this.container.querySelector('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Person');
-      labels[1].textContent.should.equal('First name');
-      labels[2].textContent.should.equal('Last name');
-      labels[3].textContent.should.equal('Address');
-      labels[4].textContent.should.equal('Street');
-      labels[5].textContent.should.equal('City');
-      labels[6].textContent.should.equal('State');
+      legend.textContent.should.equal('Person');
+      labels[0].textContent.should.equal('First name');
+      labels[1].textContent.should.equal('Last name');
+      labels[2].textContent.should.equal('Address');
+      labels[3].textContent.should.equal('Street');
+      labels[4].textContent.should.equal('City');
+      labels[5].textContent.should.equal('State');
 
       const inputs = this.container.querySelectorAll('input');
 
diff --git a/test/specs/index.spec.jsx b/test/specs/index.spec.jsx
index b3bb6c1..8e876f1 100644
--- a/test/specs/index.spec.jsx
+++ b/test/specs/index.spec.jsx
@@ -250,17 +250,18 @@ describe('exported', () => {
   });
 
   describe('TabularCompoundInput', () => {
-    it('should render outer and inner labels', function test() {
+    it('should render outer legend and inner labels', function test() {
       render(
         <TabularCompoundInput label="Compound input label">
           <TextInput name="objectNumber" label="Inner label" />
         </TabularCompoundInput>, this.container,
       );
 
+      const legend = this.container.querySelector('legend');
       const labels = this.container.querySelectorAll('label');
 
-      labels[0].textContent.should.equal('Compound input label');
-      labels[1].textContent.should.equal('Inner label');
+      legend.textContent.should.equal('Compound input label');
+      labels[0].textContent.should.equal('Inner label');
     });
 
     it('should render when no labels are supplied', function test() {

From e20c2d9b10876464c114fdd4ae6d148b11a34635 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 15:27:02 +0300
Subject: [PATCH 5/9] DRYD-1923: render label as legend in InputTable; wrap it
 in a fieldset;

---
 src/components/InputTable.jsx             | 27 +++++++++++++++++++++--
 styles/cspace-input/InputTable.css        |  5 ++++-
 test/specs/components/InputTable.spec.jsx |  4 ++--
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/InputTable.jsx b/src/components/InputTable.jsx
index 81cda21..95f32e2 100644
--- a/src/components/InputTable.jsx
+++ b/src/components/InputTable.jsx
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import InputTableHeader from './InputTableHeader';
 import InputTableRow from './InputTableRow';
 import styles from '../../styles/cspace-input/InputTable.css';
+import Label from './Label';
 
 const propTypes = {
   children: PropTypes.node,
   embedded: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.node,
   renderLabel: PropTypes.func,
   renderAriaLabel: PropTypes.func,
 };
@@ -14,6 +17,8 @@ const propTypes = {
 const defaultProps = {
   children: undefined,
   embedded: undefined,
+  id: undefined,
+  label: undefined,
   renderLabel: undefined,
   renderAriaLabel: undefined,
 };
@@ -22,12 +27,29 @@ export default function InputTable(props) {
   const {
     children,
     embedded,
+    id,
+    label,
     renderLabel,
     renderAriaLabel,
   } = props;
 
+  let legend = null;
+
+  if (React.isValidElement(label) && label.type === Label) {
+    // Extract the label's children, className, id
+    // and render it as legend instead of an orphaned label
+    legend = (
+      <legend className={label.props.className} id={label.props.id}>
+        {label.props.children}
+      </legend>
+    );
+  } else if (label) {
+    legend = <legend>{label}</legend>;
+  }
+
   return (
-    <div className={styles.common}>
+    <fieldset className={styles.common} id={id}>
+      {legend}
       <InputTableHeader embedded={embedded} renderLabel={renderLabel}>
         {children}
       </InputTableHeader>
@@ -35,9 +57,10 @@ export default function InputTable(props) {
       <InputTableRow embedded={embedded} renderAriaLabel={renderAriaLabel}>
         {children}
       </InputTableRow>
-    </div>
+    </fieldset>
   );
 }
 
 InputTable.propTypes = propTypes;
 InputTable.defaultProps = defaultProps;
+InputTable.useLegend = true;
diff --git a/styles/cspace-input/InputTable.css b/styles/cspace-input/InputTable.css
index d269a54..40f3851 100644
--- a/styles/cspace-input/InputTable.css
+++ b/styles/cspace-input/InputTable.css
@@ -1,3 +1,6 @@
 .common {
-  margin-bottom: 10px;
+  margin: 0 0 10px;
+  border: none;
+  padding: 0;
+  min-width: 0;
 }
diff --git a/test/specs/components/InputTable.spec.jsx b/test/specs/components/InputTable.spec.jsx
index 29e8060..1595b71 100644
--- a/test/specs/components/InputTable.spec.jsx
+++ b/test/specs/components/InputTable.spec.jsx
@@ -14,14 +14,14 @@ describe('InputTable', () => {
     this.container = createTestContainer(this);
   });
 
-  it('should render as a div', function test() {
+  it('should render as a fieldset', function test() {
     render(
       <InputTable>
         <LineInput name="input1" label="test" />
       </InputTable>, this.container,
     );
 
-    this.container.firstElementChild.nodeName.should.equal('DIV');
+    this.container.firstElementChild.nodeName.should.equal('FIELDSET');
   });
 
   it('should render a header row and an input row', function test() {

From b501df3f89b00d00f107e3f4ab83a981400fb16b Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 15:39:16 +0300
Subject: [PATCH 6/9] DRYD-1923: removed redundant label from CheckboxInput;

---
 src/components/CheckboxInput.jsx             | 10 ++++------
 styles/cspace-input/CheckboxInput.css        |  7 +++++--
 test/specs/components/CheckboxInput.spec.jsx |  4 ++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/CheckboxInput.jsx b/src/components/CheckboxInput.jsx
index eeff357..93be7f7 100644
--- a/src/components/CheckboxInput.jsx
+++ b/src/components/CheckboxInput.jsx
@@ -116,14 +116,12 @@ export default class CheckboxInput extends Component {
       );
     }
 
-    // FIXME: Don't break jsx-a11y/label-has-associated-control.
-
     /* eslint-disable
-       jsx-a11y/label-has-associated-control,
+       jsx-a11y/no-static-element-interactions,
        jsx-a11y/no-noninteractive-element-interactions,
        jsx-a11y/click-events-have-key-events */
     return (
-      <label className={classes} onClick={onClick}>
+      <span className={classes} onClick={onClick}>
         <input
           checked={checked}
           data-name={name}
@@ -134,10 +132,10 @@ export default class CheckboxInput extends Component {
           {...remainingProps}
         />
         <span />
-      </label>
+      </span>
     );
     /* eslint-enable
-       jsx-a11y/label-has-associated-control,
+       jsx-a11y/no-static-element-interactions,
        jsx-a11y/no-noninteractive-element-interactions,
        jsx-a11y/click-events-have-key-events */
   }
diff --git a/styles/cspace-input/CheckboxInput.css b/styles/cspace-input/CheckboxInput.css
index 6a61465..b797043 100644
--- a/styles/cspace-input/CheckboxInput.css
+++ b/styles/cspace-input/CheckboxInput.css
@@ -7,9 +7,12 @@
 
 .common > input {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
+  cursor: pointer;
 }
 
 .common > input + span {
diff --git a/test/specs/components/CheckboxInput.spec.jsx b/test/specs/components/CheckboxInput.spec.jsx
index 089d92c..edc30a8 100644
--- a/test/specs/components/CheckboxInput.spec.jsx
+++ b/test/specs/components/CheckboxInput.spec.jsx
@@ -20,10 +20,10 @@ describe('CheckboxInput', () => {
     isInput(<CheckboxInput />).should.equal(true);
   });
 
-  it('should render as a label', function test() {
+  it('should render as a span', function test() {
     render(<CheckboxInput />, this.container);
 
-    this.container.firstElementChild.nodeName.should.equal('LABEL');
+    this.container.firstElementChild.nodeName.should.equal('SPAN');
   });
 
   it('should render with correct class', function test() {

From 4c9c56fcf66554471dbca9bfc8b55bed6b72cff4 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Thu, 7 May 2026 15:55:21 +0300
Subject: [PATCH 7/9] DRYD-1923: added forwarding id to LineInput in
 AutocompleteInput.jsx; propagate id through
 CustomCompoundInput.decorateInputs

---
 src/components/AutocompleteInput.jsx   |  2 ++
 src/components/CustomCompoundInput.jsx | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/AutocompleteInput.jsx b/src/components/AutocompleteInput.jsx
index 135e27b..1aec5c7 100644
--- a/src/components/AutocompleteInput.jsx
+++ b/src/components/AutocompleteInput.jsx
@@ -480,6 +480,7 @@ export default class AutocompleteInput extends Component {
       asText,
       embedded,
       readOnly,
+      id,
     } = this.props;
 
     const {
@@ -492,6 +493,7 @@ export default class AutocompleteInput extends Component {
         readOnly={readOnly}
         value={getDisplayName(value)}
         embedded={embedded}
+        id={id}
       />
     );
   }
diff --git a/src/components/CustomCompoundInput.jsx b/src/components/CustomCompoundInput.jsx
index b61a9ed..f5c94cd 100644
--- a/src/components/CustomCompoundInput.jsx
+++ b/src/components/CustomCompoundInput.jsx
@@ -12,6 +12,7 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   defaultChildSubpath: pathPropType,
+  id: PropTypes.string,
   label: PropTypes.node,
   name: PropTypes.string,
   // TODO: Stop using propTypes in isInput. Until then, these unused props need to be declared so
@@ -36,6 +37,7 @@ const defaultProps = {
   parentPath: undefined,
   subpath: undefined,
   readOnly: undefined,
+  id: undefined,
   value: {},
 };
 
@@ -65,6 +67,7 @@ export default class CustomCompoundInput extends Component {
   decorateInputs(children) {
     const {
       readOnly,
+      id: parentId,
     } = this.props;
 
     return React.Children.map(children, (child) => {
@@ -91,12 +94,21 @@ export default class CustomCompoundInput extends Component {
           subpath = defaultChildSubpath;
         }
 
-        return React.cloneElement(child, {
+        const overrides = {
           readOnly,
           subpath,
           parentPath: getPath(this.props),
           value: getChildValue(value, subpath, name),
-        });
+        };
+
+        // Propagate id to inputs that don't have one, so the id chain mirrors the
+        // data path and labels can associate via htmlFor without each call site
+        // computing ids manually.
+        if (!child.props.id && parentId && name) {
+          overrides.id = `${parentId}-${name}`;
+        }
+
+        return React.cloneElement(child, overrides);
       }
 
       return React.cloneElement(child, {

From 17cb5c3207dce9a7bca990245123d31e42b7e117 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Fri, 8 May 2026 12:38:29 +0300
Subject: [PATCH 8/9] DRYD-1923: added labelToLegend helper and reused it in
 all fieldset cases;

---
 src/components/CustomCompoundInput.jsx  | 14 ++------------
 src/components/InputTable.jsx           | 16 ++--------------
 src/components/RepeatingInput.jsx       | 20 ++------------------
 src/components/TabularCompoundInput.jsx | 14 ++------------
 styles/cspace-input/Label.css           |  8 ++++++++
 5 files changed, 16 insertions(+), 56 deletions(-)

diff --git a/src/components/CustomCompoundInput.jsx b/src/components/CustomCompoundInput.jsx
index f5c94cd..3d270cf 100644
--- a/src/components/CustomCompoundInput.jsx
+++ b/src/components/CustomCompoundInput.jsx
@@ -6,7 +6,7 @@ import get from 'lodash/get';
 import { getPath, pathPropType } from '../helpers/pathHelpers';
 import { isInput } from '../helpers/inputHelpers';
 import styles from '../../styles/cspace-input/CompoundInput.css';
-import Label from './Label';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
@@ -130,17 +130,7 @@ export default class CustomCompoundInput extends Component {
       [styles.readOnly]: readOnly,
     });
 
-    let legend = null;
-
-    if (React.isValidElement(label) && label.type === Label) {
-      // Extract the label's children, className, id
-      // and render it as legend instead of an orphaned label
-      legend = (
-        <legend className={label.props.className} id={label.props.id}>
-          {label.props.children}
-        </legend>
-      );
-    }
+    const legend = labelToLegend(label);
 
     return (
       <fieldset
diff --git a/src/components/InputTable.jsx b/src/components/InputTable.jsx
index 95f32e2..3aed2c7 100644
--- a/src/components/InputTable.jsx
+++ b/src/components/InputTable.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import InputTableHeader from './InputTableHeader';
 import InputTableRow from './InputTableRow';
 import styles from '../../styles/cspace-input/InputTable.css';
-import Label from './Label';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
@@ -33,19 +33,7 @@ export default function InputTable(props) {
     renderAriaLabel,
   } = props;
 
-  let legend = null;
-
-  if (React.isValidElement(label) && label.type === Label) {
-    // Extract the label's children, className, id
-    // and render it as legend instead of an orphaned label
-    legend = (
-      <legend className={label.props.className} id={label.props.id}>
-        {label.props.children}
-      </legend>
-    );
-  } else if (label) {
-    legend = <legend>{label}</legend>;
-  }
+  const legend = labelToLegend(label);
 
   return (
     <fieldset className={styles.common} id={id}>
diff --git a/src/components/RepeatingInput.jsx b/src/components/RepeatingInput.jsx
index 1b5817a..72e7eef 100644
--- a/src/components/RepeatingInput.jsx
+++ b/src/components/RepeatingInput.jsx
@@ -8,7 +8,7 @@ import { getPath, pathPropType } from '../helpers/pathHelpers';
 import miniButtonContainerStyles from '../../styles/cspace-input/MiniButtonContainer.css';
 import moveToTopButtonStyles from '../../styles/cspace-input/MoveToTopButton.css';
 import styles from '../../styles/cspace-input/RepeatingInput.css';
-import Label from './Label';
+import labelToLegend from '../helpers/labelToLegend';
 
 const propTypes = {
   children: PropTypes.node,
@@ -80,23 +80,7 @@ const normalizeValue = (value) => {
   return normalized;
 };
 
-const renderHeader = (label) => {
-  if (!label) {
-    return null;
-  }
-
-  if (React.isValidElement(label) && label.type === Label) {
-    // Extract the label's children, className, id
-    // and render it as legend instead of an orphaned label
-    return (
-      <legend className={label.props.className} id={label.props.id}>
-        {label.props.children}
-      </legend>
-    );
-  }
-
-  return <legend>{label}</legend>;
-};
+const renderHeader = (label) => labelToLegend(label);
 
 export default class RepeatingInput extends Component {
   constructor(props) {
diff --git a/src/components/TabularCompoundInput.jsx b/src/components/TabularCompoundInput.jsx
index fa816ec..c07c287 100644
--- a/src/components/TabularCompoundInput.jsx
+++ b/src/components/TabularCompoundInput.jsx
@@ -6,7 +6,7 @@ import InputTableHeader from './InputTableHeader';
 import labelable from '../enhancers/labelable';
 import repeatable from '../enhancers/repeatable';
 import { getPath } from '../helpers/pathHelpers';
-import Label from './Label';
+import labelToLegend from '../helpers/labelToLegend';
 
 const BaseComponent = repeatable(labelable(CustomCompoundInput));
 
@@ -70,17 +70,7 @@ export default class TabularCompoundInput extends Component {
       </InputTableHeader>
     );
 
-    let legend = null;
-
-    if (React.isValidElement(label) && label.type === Label) {
-      // Extract the label's children, className, id
-      // and render it as legend instead of an orphaned label
-      legend = (
-        <legend className={label.props.className} id={label.props.id}>
-          {label.props.children}
-        </legend>
-      );
-    }
+    const legend = labelToLegend(label);
 
     return (
       <>
diff --git a/styles/cspace-input/Label.css b/styles/cspace-input/Label.css
index 40cd90c..c53ba9f 100644
--- a/styles/cspace-input/Label.css
+++ b/styles/cspace-input/Label.css
@@ -9,6 +9,14 @@
   color: textLabel;
 }
 
+/* When applied to a <legend> inside a <fieldset>, override the browser's special
+   legend-on-border positioning so it participates in normal block flow. */
+legend.common {
+  float: left;
+  width: 100%;
+  padding-inline: 0;
+}
+
 .required {
   composes: common;
 }

From 3b8fe511169bf737b69553d7c7c99598434eea25 Mon Sep 17 00:00:00 2001
From: spiros dimopulos <spiros@wantedpixel.com>
Date: Mon, 11 May 2026 11:37:57 +0300
Subject: [PATCH 9/9] DRYD-1923: added reusable labelToLegend helper; updated
 changelog; code cosmetics;

---
 CHANGELOG.md                           |  4 ++++
 src/components/CustomCompoundInput.jsx |  4 +---
 src/helpers/labelToLegend.jsx          | 24 ++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/helpers/labelToLegend.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55fc299..bf64854 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 2.1.2
+
+* Add htmlFor/id attribute to labels associating them to inputs
+
 ## 2.1.1
 
 * Increase contrast in disabled mini button text
diff --git a/src/components/CustomCompoundInput.jsx b/src/components/CustomCompoundInput.jsx
index 3d270cf..2b72d26 100644
--- a/src/components/CustomCompoundInput.jsx
+++ b/src/components/CustomCompoundInput.jsx
@@ -101,9 +101,7 @@ export default class CustomCompoundInput extends Component {
           value: getChildValue(value, subpath, name),
         };
 
-        // Propagate id to inputs that don't have one, so the id chain mirrors the
-        // data path and labels can associate via htmlFor without each call site
-        // computing ids manually.
+        // Propagate id to inputs that don't have one
         if (!child.props.id && parentId && name) {
           overrides.id = `${parentId}-${name}`;
         }
diff --git a/src/helpers/labelToLegend.jsx b/src/helpers/labelToLegend.jsx
new file mode 100644
index 0000000..455d333
--- /dev/null
+++ b/src/helpers/labelToLegend.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Label from '../components/Label';
+import labelStyles from '../../styles/cspace-input/Label.css';
+
+// Extract the label's children, className, id
+// and render it as legend instead of an orphaned label
+export default function labelToLegend(label) {
+  if (!label) {
+    return null;
+  }
+
+  if (React.isValidElement(label) && label.type === Label) {
+    const { required, readOnly } = label.props;
+    const className = (required && !readOnly) ? labelStyles.required : labelStyles.common;
+
+    return (
+      <legend className={className} id={label.props.id}>
+        {label.props.children}
+      </legend>
+    );
+  }
+
+  return <legend>{label}</legend>;
+}