From c0a268394b9124d3df56e731d85e76e3ee97baab Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Tue, 16 Apr 2024 16:47:26 +0300
Subject: [PATCH 1/5] FIO-8199: Fixes an issue where Checkbox does not have id
 and for attributes

---
 src/templates/bootstrap/checkbox/form.ejs | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/templates/bootstrap/checkbox/form.ejs b/src/templates/bootstrap/checkbox/form.ejs
index eea040239f..b82f8c1b7e 100644
--- a/src/templates/bootstrap/checkbox/form.ejs
+++ b/src/templates/bootstrap/checkbox/form.ejs
@@ -1,12 +1,27 @@
 <div class="form-check checkbox">
+<<<<<<< HEAD
   <label class="{{ctx.input.labelClass}} form-check-label">
+=======
+  <label
+    class="{{ctx.input.labelClass}} form-check-label"
+    for="{{ctx.instance.id}}-{{ctx.component.key}}"
+    id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+  >
+>>>>>>> 4464700633 (FIO-8199: Fixes an issue where Checkbox does not have id and for attributes)
     <{{ctx.input.type}}
       ref="input"
       {% for (var attr in ctx.input.attr) { %}
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
+<<<<<<< HEAD
       {% if (ctx.checked) { %}checked=true{% } %}
       aria-required="{{ctx.component.validate.required}}"
+=======
+      id="{{ctx.instance.id}}-{{ctx.component.key}}"
+      {% if (ctx.checked) { %}checked=true{% } %}
+      aria-required="{{ctx.component.validate.required}}"
+      aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}
+>>>>>>> 4464700633 (FIO-8199: Fixes an issue where Checkbox does not have id and for attributes)
       {% if (ctx.component.description) { %}
       aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}

From 5f0f8d95a3de86c8ffe8aa76c845fe966f24efe4 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Tue, 16 Apr 2024 16:52:15 +0300
Subject: [PATCH 2/5] Added a test

---
 src/components/checkbox/Checkbox.unit.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/checkbox/Checkbox.unit.js b/src/components/checkbox/Checkbox.unit.js
index 248c4a0cfa..60221be3e8 100644
--- a/src/components/checkbox/Checkbox.unit.js
+++ b/src/components/checkbox/Checkbox.unit.js
@@ -25,15 +25,19 @@ describe('Checkbox Component', () => {
     });
   });
 
-  it('Span should have correct text label', () => {
+  it('Span should have correct text label and attributes', () => {
     return Harness.testCreate(CheckBoxComponent, comp1).then((component) => {
       const checkboxes = component.element.querySelectorAll('input[ref="input"]');
       assert.equal(checkboxes.length, 1);
       const componentClass = checkboxes[0].getAttribute('class');
+      const componentId = checkboxes[0].getAttribute('id');
       assert(componentClass.indexOf('form-check-input') !== -1, 'No form-check-input class.');
+      assert(componentId, 'Should provide "id" attribute for the input');
       const labels = component.element.querySelectorAll('label');
       assert.equal(labels.length, 1);
       assert(labels[0].getAttribute('class').indexOf('form-check-label') !== -1, 'No form-check-label class');
+      assert.equal(labels[0].getAttribute('for'), componentId, 'Should provide a proper "for" attribute for the' +
+        ' label');
       const spans = labels[0].querySelectorAll('span');
       assert.equal(spans.length, 1);
       assert.equal(spans[0].innerHTML, 'Check me');

From 2a14e67eebebe4b1b33e8e218d9d27e76ab18f33 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Fri, 26 Apr 2024 16:41:09 +0300
Subject: [PATCH 3/5] Fixed conflicts

---
 src/templates/bootstrap/checkbox/form.ejs | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/templates/bootstrap/checkbox/form.ejs b/src/templates/bootstrap/checkbox/form.ejs
index b82f8c1b7e..323e3cbdd1 100644
--- a/src/templates/bootstrap/checkbox/form.ejs
+++ b/src/templates/bootstrap/checkbox/form.ejs
@@ -1,27 +1,18 @@
 <div class="form-check checkbox">
-<<<<<<< HEAD
-  <label class="{{ctx.input.labelClass}} form-check-label">
-=======
   <label
     class="{{ctx.input.labelClass}} form-check-label"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
     id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
   >
->>>>>>> 4464700633 (FIO-8199: Fixes an issue where Checkbox does not have id and for attributes)
     <{{ctx.input.type}}
       ref="input"
       {% for (var attr in ctx.input.attr) { %}
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
-<<<<<<< HEAD
-      {% if (ctx.checked) { %}checked=true{% } %}
-      aria-required="{{ctx.component.validate.required}}"
-=======
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.checked) { %}checked=true{% } %}
       aria-required="{{ctx.component.validate.required}}"
       aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}
->>>>>>> 4464700633 (FIO-8199: Fixes an issue where Checkbox does not have id and for attributes)
       {% if (ctx.component.description) { %}
       aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}

From 47caf78273b21f00873da59fcc61e084858569e4 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Thu, 16 May 2024 23:44:06 +0300
Subject: [PATCH 4/5] Fixed tests

---
 src/templates/bootstrap/checkbox/form.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/bootstrap/checkbox/form.ejs b/src/templates/bootstrap/checkbox/form.ejs
index 323e3cbdd1..9d910d250d 100644
--- a/src/templates/bootstrap/checkbox/form.ejs
+++ b/src/templates/bootstrap/checkbox/form.ejs
@@ -12,7 +12,7 @@
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.checked) { %}checked=true{% } %}
       aria-required="{{ctx.component.validate.required}}"
-      aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}
+      aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.component.description) { %}
       aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}

From 0748c34bce7b3f24508dcc3d2419b2b767a7de99 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Fri, 17 May 2024 11:43:22 +0300
Subject: [PATCH 5/5] Updated renders

---
 test/renders/component-bootstrap-checkbox-multiple.html   | 4 ++--
 .../component-bootstrap-checkbox-readOnly-value0.html     | 4 ++--
 .../component-bootstrap-checkbox-readOnly-value1.html     | 4 ++--
 .../component-bootstrap-checkbox-readOnly-value2.html     | 4 ++--
 test/renders/component-bootstrap-checkbox-readOnly.html   | 4 ++--
 test/renders/component-bootstrap-checkbox-required.html   | 4 ++--
 test/renders/component-bootstrap-checkbox.html            | 4 ++--
 .../component-bootstrap-datetime-readOnly-value1.html     | 2 +-
 .../component-bootstrap-datetime-readOnly-value2.html     | 2 +-
 test/renders/component-bootstrap3-checkbox-multiple.html  | 4 ++--
 .../component-bootstrap3-checkbox-readOnly-value0.html    | 4 ++--
 .../component-bootstrap3-checkbox-readOnly-value1.html    | 4 ++--
 .../component-bootstrap3-checkbox-readOnly-value2.html    | 4 ++--
 test/renders/component-bootstrap3-checkbox-readOnly.html  | 4 ++--
 test/renders/component-bootstrap3-checkbox-required.html  | 4 ++--
 test/renders/component-bootstrap3-checkbox.html           | 4 ++--
 .../component-bootstrap3-datetime-readOnly-value1.html    | 2 +-
 .../component-bootstrap3-datetime-readOnly-value2.html    | 2 +-
 test/renders/component-bootstrap5-checkbox-multiple.html  | 4 ++--
 .../component-bootstrap5-checkbox-readOnly-value0.html    | 4 ++--
 .../component-bootstrap5-checkbox-readOnly-value1.html    | 4 ++--
 .../component-bootstrap5-checkbox-readOnly-value2.html    | 4 ++--
 test/renders/component-bootstrap5-checkbox-readOnly.html  | 4 ++--
 test/renders/component-bootstrap5-checkbox-required.html  | 4 ++--
 test/renders/component-bootstrap5-checkbox.html           | 4 ++--
 .../component-bootstrap5-datetime-readOnly-value1.html    | 2 +-
 .../component-bootstrap5-datetime-readOnly-value2.html    | 2 +-
 .../component-semantic-datetime-readOnly-value1.html      | 2 +-
 .../component-semantic-datetime-readOnly-value2.html      | 2 +-
 test/renders/form-bootstrap-basic.html                    | 4 ++--
 .../form-bootstrap-calculateValueWithManualOverride.html  | 4 ++--
 test/renders/form-bootstrap-data.html                     | 8 ++++----
 test/renders/form-bootstrap-defaults.html                 | 8 ++++----
 ...otstrap-formComponentWithConditionalRenderingForm.html | 4 ++--
 test/renders/form-bootstrap-formWithAdvancedLogic.html    | 4 ++--
 test/renders/form-bootstrap-modalEditComponents.html      | 4 ++--
 test/renders/form-bootstrap-premium.html                  | 4 ++--
 test/renders/form-bootstrap-readOnly-basic.html           | 4 ++--
 ...otstrap-readOnly-calculateValueWithManualOverride.html | 4 ++--
 test/renders/form-bootstrap-readOnly-data.html            | 8 ++++----
 test/renders/form-bootstrap-readOnly-defaults.html        | 8 ++++----
 ...eadOnly-formComponentWithConditionalRenderingForm.html | 4 ++--
 .../form-bootstrap-readOnly-formWithAdvancedLogic.html    | 4 ++--
 .../form-bootstrap-readOnly-modalEditComponents.html      | 4 ++--
 test/renders/form-bootstrap-readOnly-premium.html         | 4 ++--
 test/renders/form-bootstrap-readOnly-settingErrors.html   | 4 ++--
 .../form-bootstrap-readOnly-tooltipActivateCheckbox.html  | 4 ++--
 ...ootstrap-readOnly-wizardWithSimpleConditionalPage.html | 4 ++--
 test/renders/form-bootstrap-settingErrors.html            | 4 ++--
 test/renders/form-bootstrap-tooltipActivateCheckbox.html  | 4 ++--
 .../form-bootstrap-wizardWithSimpleConditionalPage.html   | 4 ++--
 test/renders/form-bootstrap3-basic.html                   | 4 ++--
 .../form-bootstrap3-calculateValueWithManualOverride.html | 4 ++--
 test/renders/form-bootstrap3-data.html                    | 8 ++++----
 test/renders/form-bootstrap3-defaults.html                | 8 ++++----
 ...tstrap3-formComponentWithConditionalRenderingForm.html | 4 ++--
 test/renders/form-bootstrap3-formWithAdvancedLogic.html   | 4 ++--
 test/renders/form-bootstrap3-modalEditComponents.html     | 4 ++--
 test/renders/form-bootstrap3-premium.html                 | 4 ++--
 test/renders/form-bootstrap3-readOnly-basic.html          | 4 ++--
 ...tstrap3-readOnly-calculateValueWithManualOverride.html | 4 ++--
 test/renders/form-bootstrap3-readOnly-data.html           | 8 ++++----
 test/renders/form-bootstrap3-readOnly-defaults.html       | 8 ++++----
 ...eadOnly-formComponentWithConditionalRenderingForm.html | 4 ++--
 .../form-bootstrap3-readOnly-formWithAdvancedLogic.html   | 4 ++--
 .../form-bootstrap3-readOnly-modalEditComponents.html     | 4 ++--
 test/renders/form-bootstrap3-readOnly-premium.html        | 4 ++--
 test/renders/form-bootstrap3-readOnly-settingErrors.html  | 4 ++--
 .../form-bootstrap3-readOnly-tooltipActivateCheckbox.html | 4 ++--
 ...otstrap3-readOnly-wizardWithSimpleConditionalPage.html | 4 ++--
 test/renders/form-bootstrap3-settingErrors.html           | 4 ++--
 test/renders/form-bootstrap3-tooltipActivateCheckbox.html | 4 ++--
 .../form-bootstrap3-wizardWithSimpleConditionalPage.html  | 4 ++--
 test/renders/form-bootstrap5-basic.html                   | 4 ++--
 .../form-bootstrap5-calculateValueWithManualOverride.html | 4 ++--
 test/renders/form-bootstrap5-data.html                    | 8 ++++----
 test/renders/form-bootstrap5-defaults.html                | 8 ++++----
 ...tstrap5-formComponentWithConditionalRenderingForm.html | 4 ++--
 test/renders/form-bootstrap5-formWithAdvancedLogic.html   | 4 ++--
 test/renders/form-bootstrap5-modalEditComponents.html     | 4 ++--
 test/renders/form-bootstrap5-premium.html                 | 4 ++--
 test/renders/form-bootstrap5-readOnly-basic.html          | 4 ++--
 ...tstrap5-readOnly-calculateValueWithManualOverride.html | 4 ++--
 test/renders/form-bootstrap5-readOnly-data.html           | 8 ++++----
 test/renders/form-bootstrap5-readOnly-defaults.html       | 8 ++++----
 ...eadOnly-formComponentWithConditionalRenderingForm.html | 4 ++--
 .../form-bootstrap5-readOnly-formWithAdvancedLogic.html   | 4 ++--
 .../form-bootstrap5-readOnly-modalEditComponents.html     | 4 ++--
 test/renders/form-bootstrap5-readOnly-premium.html        | 4 ++--
 test/renders/form-bootstrap5-readOnly-settingErrors.html  | 4 ++--
 .../form-bootstrap5-readOnly-tooltipActivateCheckbox.html | 4 ++--
 ...otstrap5-readOnly-wizardWithSimpleConditionalPage.html | 4 ++--
 test/renders/form-bootstrap5-settingErrors.html           | 4 ++--
 test/renders/form-bootstrap5-tooltipActivateCheckbox.html | 4 ++--
 .../form-bootstrap5-wizardWithSimpleConditionalPage.html  | 4 ++--
 95 files changed, 206 insertions(+), 206 deletions(-)

diff --git a/test/renders/component-bootstrap-checkbox-multiple.html b/test/renders/component-bootstrap-checkbox-multiple.html
index 7511cf9ac4..439356e044 100644
--- a/test/renders/component-bootstrap-checkbox-multiple.html
+++ b/test/renders/component-bootstrap-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value0.html b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value1.html b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
index b4d2337f78..473e1f0462 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly-value2.html b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-readOnly.html b/test/renders/component-bootstrap-checkbox-readOnly.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox-required.html b/test/renders/component-bootstrap-checkbox-required.html
index 3d652e978b..ea4d08d94c 100644
--- a/test/renders/component-bootstrap-checkbox-required.html
+++ b/test/renders/component-bootstrap-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-checkbox.html b/test/renders/component-bootstrap-checkbox.html
index 2ff3a53881..2d8cab7985 100644
--- a/test/renders/component-bootstrap-checkbox.html
+++ b/test/renders/component-bootstrap-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap-datetime-readOnly-value1.html b/test/renders/component-bootstrap-datetime-readOnly-value1.html
index 70f516c42e..9a6b3ba481 100644
--- a/test/renders/component-bootstrap-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="sr-only" ref="liveRegion"></span>
       <div class="input-group-append" ref="suffix">
         <span class="input-group-text">
diff --git a/test/renders/component-bootstrap-datetime-readOnly-value2.html b/test/renders/component-bootstrap-datetime-readOnly-value2.html
index 7e97079e6f..4cc6dfac33 100644
--- a/test/renders/component-bootstrap-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="sr-only" ref="liveRegion"></span>
       <div class="input-group-append" ref="suffix">
         <span class="input-group-text">
diff --git a/test/renders/component-bootstrap3-checkbox-multiple.html b/test/renders/component-bootstrap3-checkbox-multiple.html
index 7511cf9ac4..439356e044 100644
--- a/test/renders/component-bootstrap3-checkbox-multiple.html
+++ b/test/renders/component-bootstrap3-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value0.html b/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value1.html b/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
index b4d2337f78..473e1f0462 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly-value2.html b/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-readOnly.html b/test/renders/component-bootstrap3-checkbox-readOnly.html
index f62b644b7b..c7c18743d9 100644
--- a/test/renders/component-bootstrap3-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap3-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox-required.html b/test/renders/component-bootstrap3-checkbox-required.html
index 3d652e978b..ea4d08d94c 100644
--- a/test/renders/component-bootstrap3-checkbox-required.html
+++ b/test/renders/component-bootstrap3-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-checkbox.html b/test/renders/component-bootstrap3-checkbox.html
index 2ff3a53881..2d8cab7985 100644
--- a/test/renders/component-bootstrap3-checkbox.html
+++ b/test/renders/component-bootstrap3-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap3-datetime-readOnly-value1.html b/test/renders/component-bootstrap3-datetime-readOnly-value1.html
index 05b0556686..91a510b9de 100644
--- a/test/renders/component-bootstrap3-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap3-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime"></input>
       <div class="input-group-addon" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-bootstrap3-datetime-readOnly-value2.html b/test/renders/component-bootstrap3-datetime-readOnly-value2.html
index a0de7fddbc..e5527420d9 100644
--- a/test/renders/component-bootstrap3-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap3-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime"></input>
       <div class="input-group-addon" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-bootstrap5-checkbox-multiple.html b/test/renders/component-bootstrap5-checkbox-multiple.html
index 6b9f8b95a4..be35089b22 100644
--- a/test/renders/component-bootstrap5-checkbox-multiple.html
+++ b/test/renders/component-bootstrap5-checkbox-multiple.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox formio-component-multiple " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value0.html b/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value0.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value1.html b/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
index 253f10fc3d..b98f374ff1 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value1.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" checked=true aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly-value2.html b/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly-value2.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-readOnly.html b/test/renders/component-bootstrap5-checkbox-readOnly.html
index c85e9434c8..dffba97f78 100644
--- a/test/renders/component-bootstrap5-checkbox-readOnly.html
+++ b/test/renders/component-bootstrap5-checkbox-readOnly.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox-required.html b/test/renders/component-bootstrap5-checkbox-required.html
index c76cd951cf..66ffcfded5 100644
--- a/test/renders/component-bootstrap5-checkbox-required.html
+++ b/test/renders/component-bootstrap5-checkbox-required.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox  required" ref="component">
   <div class="form-check checkbox">
-    <label class=" field-required form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+    <label class=" field-required form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="true" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-checkbox.html b/test/renders/component-bootstrap5-checkbox.html
index f14c2a2217..db9e7be013 100644
--- a/test/renders/component-bootstrap5-checkbox.html
+++ b/test/renders/component-bootstrap5-checkbox.html
@@ -1,7 +1,7 @@
 <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
   <div class="form-check checkbox">
-    <label class=" form-check-label">
-      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+    <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+      <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
       <span>Checkbox</span>
       </input>
     </label>
diff --git a/test/renders/component-bootstrap5-datetime-readOnly-value1.html b/test/renders/component-bootstrap5-datetime-readOnly-value1.html
index 2c20a6cbdb..3b757ebddc 100644
--- a/test/renders/component-bootstrap5-datetime-readOnly-value1.html
+++ b/test/renders/component-bootstrap5-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 06:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="visually-hidden" ref="liveRegion"></span>
       <div class="input-group-text" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
diff --git a/test/renders/component-bootstrap5-datetime-readOnly-value2.html b/test/renders/component-bootstrap5-datetime-readOnly-value2.html
index 894f585047..4073de8358 100644
--- a/test/renders/component-bootstrap5-datetime-readOnly-value2.html
+++ b/test/renders/component-bootstrap5-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="input-group">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 08:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="false"></input>
       <span aria-live="assertive" id="dateTime-liveRegion" class="visually-hidden" ref="liveRegion"></span>
       <div class="input-group-text" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
diff --git a/test/renders/component-semantic-datetime-readOnly-value1.html b/test/renders/component-semantic-datetime-readOnly-value1.html
index acd56557ae..178ea1fd96 100644
--- a/test/renders/component-semantic-datetime-readOnly-value1.html
+++ b/test/renders/component-semantic-datetime-readOnly-value1.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="ui input fluid  right labeled">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 09:00 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-06 08:00 PM" id="dateTime-dateTime"></input>
       <div class="ui label" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/component-semantic-datetime-readOnly-value2.html b/test/renders/component-semantic-datetime-readOnly-value2.html
index 4fc7bc1a51..251261302b 100644
--- a/test/renders/component-semantic-datetime-readOnly-value2.html
+++ b/test/renders/component-semantic-datetime-readOnly-value2.html
@@ -4,7 +4,7 @@
   </label>
   <div ref="element">
     <div class="ui input fluid  right labeled">
-      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 11:11 PM" id="dateTime-dateTime"></input>
+      <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="2019-11-25 10:11 PM" id="dateTime-dateTime"></input>
       <div class="ui label" ref="suffix">
         <i ref="icon" class="fa fa-calendar" style=""></i>
       </div>
diff --git a/test/renders/form-bootstrap-basic.html b/test/renders/form-bootstrap-basic.html
index bb1445e0d7..5fd1f667a5 100644
--- a/test/renders/form-bootstrap-basic.html
+++ b/test/renders/form-bootstrap-basic.html
@@ -103,8 +103,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
index b060064095..9d6a67342f 100644
--- a/test/renders/form-bootstrap-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap-data.html b/test/renders/form-bootstrap-data.html
index 648e569bbf..3737aeb8be 100644
--- a/test/renders/form-bootstrap-data.html
+++ b/test/renders/form-bootstrap-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -249,8 +249,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap-defaults.html b/test/renders/form-bootstrap-defaults.html
index 8925e60a42..5cfd248a58 100644
--- a/test/renders/form-bootstrap-defaults.html
+++ b/test/renders/form-bootstrap-defaults.html
@@ -39,8 +39,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -49,8 +49,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
index 31652ed940..9f47f1776b 100644
--- a/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-formWithAdvancedLogic.html b/test/renders/form-bootstrap-formWithAdvancedLogic.html
index 476a339e5b..fbb2b2f0bb 100644
--- a/test/renders/form-bootstrap-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-modalEditComponents.html b/test/renders/form-bootstrap-modalEditComponents.html
index 45f18570a4..b5ad3d1c9e 100644
--- a/test/renders/form-bootstrap-modalEditComponents.html
+++ b/test/renders/form-bootstrap-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap-premium.html b/test/renders/form-bootstrap-premium.html
index cdf93a0f00..99ecfd5070 100644
--- a/test/renders/form-bootstrap-premium.html
+++ b/test/renders/form-bootstrap-premium.html
@@ -69,8 +69,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap-readOnly-basic.html b/test/renders/form-bootstrap-readOnly-basic.html
index 89666f64d3..dd1affc600 100644
--- a/test/renders/form-bootstrap-readOnly-basic.html
+++ b/test/renders/form-bootstrap-readOnly-basic.html
@@ -87,8 +87,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
index 045cb26667..519de5c4ed 100644
--- a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap-readOnly-data.html b/test/renders/form-bootstrap-readOnly-data.html
index 4d89c95516..a4560f8ea1 100644
--- a/test/renders/form-bootstrap-readOnly-data.html
+++ b/test/renders/form-bootstrap-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap-readOnly-defaults.html b/test/renders/form-bootstrap-readOnly-defaults.html
index 336b5d107a..a91e0503dd 100644
--- a/test/renders/form-bootstrap-readOnly-defaults.html
+++ b/test/renders/form-bootstrap-readOnly-defaults.html
@@ -43,8 +43,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -53,8 +53,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
index 98b4241d85..e931790530 100644
--- a/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
index 78c0a8e3e4..1ef6a9c69b 100644
--- a/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-modalEditComponents.html b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
index ae64693cfe..3f70155af6 100644
--- a/test/renders/form-bootstrap-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap-readOnly-premium.html b/test/renders/form-bootstrap-readOnly-premium.html
index 757964a625..e60ffa5bf5 100644
--- a/test/renders/form-bootstrap-readOnly-premium.html
+++ b/test/renders/form-bootstrap-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap-readOnly-settingErrors.html b/test/renders/form-bootstrap-readOnly-settingErrors.html
index 407f1d95f1..cc4e2f4329 100644
--- a/test/renders/form-bootstrap-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap-readOnly-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
index d60faa7f0e..fcd6d12a94 100644
--- a/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
index 1e91afe169..ec84e30d2a 100644
--- a/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap-settingErrors.html b/test/renders/form-bootstrap-settingErrors.html
index b691cba8fa..82439f22a1 100644
--- a/test/renders/form-bootstrap-settingErrors.html
+++ b/test/renders/form-bootstrap-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap-tooltipActivateCheckbox.html b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
index fee87e7ad7..f440c6536c 100644
--- a/test/renders/form-bootstrap-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
index 3bbe9b16d8..8117524c9f 100644
--- a/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap3-basic.html b/test/renders/form-bootstrap3-basic.html
index fa10327f60..2f27b88d9e 100644
--- a/test/renders/form-bootstrap3-basic.html
+++ b/test/renders/form-bootstrap3-basic.html
@@ -98,8 +98,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-calculateValueWithManualOverride.html b/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
index 542f397d05..831283d8d2 100644
--- a/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap3-calculateValueWithManualOverride.html
@@ -14,8 +14,8 @@
           <div role="tabpanel" class="tab-pane active" ref="tab-tabs">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>hide</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-data.html b/test/renders/form-bootstrap3-data.html
index d82fb3f351..210124d995 100644
--- a/test/renders/form-bootstrap3-data.html
+++ b/test/renders/form-bootstrap3-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -248,8 +248,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap3-defaults.html b/test/renders/form-bootstrap3-defaults.html
index 0774ba39a5..f9b2826b55 100644
--- a/test/renders/form-bootstrap3-defaults.html
+++ b/test/renders/form-bootstrap3-defaults.html
@@ -38,8 +38,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -48,8 +48,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
index 31652ed940..9f47f1776b 100644
--- a/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap3-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-formWithAdvancedLogic.html b/test/renders/form-bootstrap3-formWithAdvancedLogic.html
index c3197fb7ef..4958c7a2e7 100644
--- a/test/renders/form-bootstrap3-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap3-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-modalEditComponents.html b/test/renders/form-bootstrap3-modalEditComponents.html
index 89e5087fed..7e348d591d 100644
--- a/test/renders/form-bootstrap3-modalEditComponents.html
+++ b/test/renders/form-bootstrap3-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-premium.html b/test/renders/form-bootstrap3-premium.html
index 9abf063390..5121743fb7 100644
--- a/test/renders/form-bootstrap3-premium.html
+++ b/test/renders/form-bootstrap3-premium.html
@@ -51,8 +51,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap3-readOnly-basic.html b/test/renders/form-bootstrap3-readOnly-basic.html
index d8b8f65e95..bcb833906d 100644
--- a/test/renders/form-bootstrap3-readOnly-basic.html
+++ b/test/renders/form-bootstrap3-readOnly-basic.html
@@ -82,8 +82,8 @@
     </div>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
index 4853edf3d7..a2d1836664 100644
--- a/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap3-readOnly-calculateValueWithManualOverride.html
@@ -14,8 +14,8 @@
           <div role="tabpanel" class="tab-pane active" ref="tab-tabs">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>hide</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-readOnly-data.html b/test/renders/form-bootstrap3-readOnly-data.html
index a39cc04a72..2dfc8ec5c7 100644
--- a/test/renders/form-bootstrap3-readOnly-data.html
+++ b/test/renders/form-bootstrap3-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap3-readOnly-defaults.html b/test/renders/form-bootstrap3-readOnly-defaults.html
index 93aae42111..2c77e562af 100644
--- a/test/renders/form-bootstrap3-readOnly-defaults.html
+++ b/test/renders/form-bootstrap3-readOnly-defaults.html
@@ -42,8 +42,8 @@
     </div>
     <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -52,8 +52,8 @@
     </div>
     <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
index 98b4241d85..e931790530 100644
--- a/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap3-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
index 3c79fd93f6..d2efe6e10a 100644
--- a/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap3-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-modalEditComponents.html b/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
index e76c66bc1b..9fce3da361 100644
--- a/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap3-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap3-readOnly-premium.html b/test/renders/form-bootstrap3-readOnly-premium.html
index 0b93190ad2..c6b39189d3 100644
--- a/test/renders/form-bootstrap3-readOnly-premium.html
+++ b/test/renders/form-bootstrap3-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap3-readOnly-settingErrors.html b/test/renders/form-bootstrap3-readOnly-settingErrors.html
index 358507eab9..64a7fcf210 100644
--- a/test/renders/form-bootstrap3-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap3-readOnly-settingErrors.html
@@ -62,8 +62,8 @@ <h4 class="mb-0 panel-title">
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
index d60faa7f0e..fcd6d12a94 100644
--- a/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap3-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
index 56d2606d7d..df935c8295 100644
--- a/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap3-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap3-settingErrors.html b/test/renders/form-bootstrap3-settingErrors.html
index d73a81a7f4..a82f661549 100644
--- a/test/renders/form-bootstrap3-settingErrors.html
+++ b/test/renders/form-bootstrap3-settingErrors.html
@@ -62,8 +62,8 @@ <h4 class="mb-0 panel-title">
   " ref="column-columns">
                     <div id="checkboxColumn" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap3-tooltipActivateCheckbox.html b/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
index fee87e7ad7..f440c6536c 100644
--- a/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap3-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
index 08d4171508..8156d3a9c9 100644
--- a/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap3-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap5-basic.html b/test/renders/form-bootstrap5-basic.html
index 39b40d404b..0542c2fae5 100644
--- a/test/renders/form-bootstrap5-basic.html
+++ b/test/renders/form-bootstrap5-basic.html
@@ -99,8 +99,8 @@
     </div>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-calculateValueWithManualOverride.html b/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
index 1f92d7ba39..e9759db2d6 100644
--- a/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap5-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap5-data.html b/test/renders/form-bootstrap5-data.html
index 9df5859f80..794f3f112a 100644
--- a/test/renders/form-bootstrap5-data.html
+++ b/test/renders/form-bootstrap5-data.html
@@ -220,8 +220,8 @@
     </div>
     <div id="show" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -249,8 +249,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap5-defaults.html b/test/renders/form-bootstrap5-defaults.html
index 8636df2b25..d26e9a1784 100644
--- a/test/renders/form-bootstrap5-defaults.html
+++ b/test/renders/form-bootstrap5-defaults.html
@@ -39,8 +39,8 @@
     </div>
     <div id="checkboxFalse" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -49,8 +49,8 @@
     </div>
     <div id="checkboxTrue" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
index b27a098cdf..0fe91b1a34 100644
--- a/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap5-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-formWithAdvancedLogic.html b/test/renders/form-bootstrap5-formWithAdvancedLogic.html
index 7a9c7db0c5..1c62c7e2b3 100644
--- a/test/renders/form-bootstrap5-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap5-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-modalEditComponents.html b/test/renders/form-bootstrap5-modalEditComponents.html
index 59837b1993..911bfb2c18 100644
--- a/test/renders/form-bootstrap5-modalEditComponents.html
+++ b/test/renders/form-bootstrap5-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap5-premium.html b/test/renders/form-bootstrap5-premium.html
index 8d15b32ec7..9db47cfe2a 100644
--- a/test/renders/form-bootstrap5-premium.html
+++ b/test/renders/form-bootstrap5-premium.html
@@ -69,8 +69,8 @@
           </div>
           <div id="valid" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap5-readOnly-basic.html b/test/renders/form-bootstrap5-readOnly-basic.html
index 1354497ce9..e6b088d0b6 100644
--- a/test/renders/form-bootstrap5-readOnly-basic.html
+++ b/test/renders/form-bootstrap5-readOnly-basic.html
@@ -83,8 +83,8 @@
     </div>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
index b68530efd8..231031ee50 100644
--- a/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap5-readOnly-calculateValueWithManualOverride.html
@@ -19,8 +19,8 @@
         <div role="tabpanel" class="card-body tab-pane active" style="display: block" ref="tab-tabs">
           <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                 <span>hide</span>
                 </input>
               </label>
diff --git a/test/renders/form-bootstrap5-readOnly-data.html b/test/renders/form-bootstrap5-readOnly-data.html
index c3bd06e217..68dfbaa59f 100644
--- a/test/renders/form-bootstrap5-readOnly-data.html
+++ b/test/renders/form-bootstrap5-readOnly-data.html
@@ -197,8 +197,8 @@
     </div>
     <div id="show" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="show-show" id="l-show-show">
+          <input ref="input" name="data[show]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="show-show" aria-required="false" aria-labelledby="l-show-show">
           <span>Show</span>
           </input>
         </label>
@@ -223,8 +223,8 @@
             <td ref="datagrid-conditionalDataGrid">
               <div id="conditionalDataGridShow2" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                 <div class="form-check checkbox">
-                  <label class=" form-check-label">
-                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                  <label class=" form-check-label" for="conditionalDataGridShow2-conditionalDataGridShow2" id="l-conditionalDataGridShow2-conditionalDataGridShow2">
+                    <input ref="input" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-required="false" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2">
                     </input>
                   </label>
                 </div>
diff --git a/test/renders/form-bootstrap5-readOnly-defaults.html b/test/renders/form-bootstrap5-readOnly-defaults.html
index 13645b4240..51cbf47087 100644
--- a/test/renders/form-bootstrap5-readOnly-defaults.html
+++ b/test/renders/form-bootstrap5-readOnly-defaults.html
@@ -43,8 +43,8 @@
     </div>
     <div id="checkboxFalse" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkboxFalse-checkboxFalse" id="l-checkboxFalse-checkboxFalse">
+          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxFalse-checkboxFalse" aria-required="false" aria-labelledby="l-checkboxFalse-checkboxFalse">
           <span>Checkbox False</span>
           </input>
         </label>
@@ -53,8 +53,8 @@
     </div>
     <div id="checkboxTrue" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" checked=true aria-required="false">
+        <label class=" form-check-label" for="checkboxTrue-checkboxTrue" id="l-checkboxTrue-checkboxTrue">
+          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxTrue-checkboxTrue" checked=true aria-required="false" aria-labelledby="l-checkboxTrue-checkboxTrue">
           <span>Checkbox True</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html b/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
index b591e20be4..82721fadda 100644
--- a/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
+++ b/test/renders/form-bootstrap5-readOnly-formComponentWithConditionalRenderingForm.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html b/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
index bf89da053e..10b804f474 100644
--- a/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
+++ b/test/renders/form-bootstrap5-readOnly-formWithAdvancedLogic.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="requestedCovers.HOUSECONTENT_JEWELRY" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-requestedCovers.HOUSECONTENT_JEWELRY " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" id="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
+          <input ref="input" name="data[requestedCovers.HOUSECONTENT_JEWELRY]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY" aria-required="false" aria-labelledby="l-requestedCovers.HOUSECONTENT_JEWELRY-requestedCovers.HOUSECONTENT_JEWELRY">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-modalEditComponents.html b/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
index 636fc05401..1ff2fd2ef4 100644
--- a/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
+++ b/test/renders/form-bootstrap5-readOnly-modalEditComponents.html
@@ -10,8 +10,8 @@
           <div ref="modalContents">
             <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
               <div class="form-check checkbox">
-                <label class=" form-check-label">
-                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+                <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+                  <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
                   <span>Checkbox</span>
                   </input>
                 </label>
diff --git a/test/renders/form-bootstrap5-readOnly-premium.html b/test/renders/form-bootstrap5-readOnly-premium.html
index c855a1f057..d86d5c3fb5 100644
--- a/test/renders/form-bootstrap5-readOnly-premium.html
+++ b/test/renders/form-bootstrap5-readOnly-premium.html
@@ -42,8 +42,8 @@
           </div>
           <div id="valid" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-valid  formio-component-label-hidden" ref="component">
             <div class="form-check checkbox">
-              <label class=" form-check-label">
-                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+              <label class=" form-check-label" for="valid-valid" id="l-valid-valid">
+                <input ref="input" name="data[valid]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="valid-valid" aria-required="false" aria-labelledby="l-valid-valid">
                 </input>
               </label>
             </div>
diff --git a/test/renders/form-bootstrap5-readOnly-settingErrors.html b/test/renders/form-bootstrap5-readOnly-settingErrors.html
index 2585049430..de5d2707b6 100644
--- a/test/renders/form-bootstrap5-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap5-readOnly-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html b/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
index 1fddf325fb..a5da32dedf 100644
--- a/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap5-readOnly-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
index 5d3ccefb23..f1b4d798b3 100644
--- a/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap5-readOnly-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>
diff --git a/test/renders/form-bootstrap5-settingErrors.html b/test/renders/form-bootstrap5-settingErrors.html
index 037e36af43..a79225a49f 100644
--- a/test/renders/form-bootstrap5-settingErrors.html
+++ b/test/renders/form-bootstrap5-settingErrors.html
@@ -63,8 +63,8 @@
   " ref="column-columns">
                     <div id="checkboxColumn" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
-                        <label class=" field-required form-check-label">
-                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
+                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
+                          <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkboxColumn-checkboxColumn" aria-required="true" aria-labelledby="l-checkboxColumn-checkboxColumn">
                           <span>Checkbox - Column</span>
                           </input>
                         </label>
diff --git a/test/renders/form-bootstrap5-tooltipActivateCheckbox.html b/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
index 57a0883feb..d16f048a6b 100644
--- a/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
+++ b/test/renders/form-bootstrap5-tooltipActivateCheckbox.html
@@ -2,8 +2,8 @@
   <div class="formio-form" ref="webform" novalidate>
     <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
       <div class="form-check checkbox">
-        <label class=" form-check-label">
-          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+        <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+          <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
           <span>Checkbox</span>
           </input>
         </label>
diff --git a/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html b/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
index 4f5f34afb4..59cfa0aa98 100644
--- a/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
+++ b/test/renders/form-bootstrap5-wizardWithSimpleConditionalPage.html
@@ -12,8 +12,8 @@
     <div class="wizard-page" ref="wizard-page1">
       <div id="checkbox" class="formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
         <div class="form-check checkbox">
-          <label class=" form-check-label">
-            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
+          <label class=" form-check-label" for="checkbox-checkbox" id="l-checkbox-checkbox">
+            <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" id="checkbox-checkbox" aria-required="false" aria-labelledby="l-checkbox-checkbox">
             <span>Checkbox</span>
             </input>
           </label>