fix(checkbox, toggle, radio-group): add initial value

Author: thetaPC

core/src/components/checkbox/checkbox.tsx

@@ -174,6 +174,7 @@ export class Checkbox implements ComponentInterface {
            * a higher priority.
            */
           Promise.resolve().then(() => {
+            console.log('updating hint text id');
             this.hintTextID = this.getHintTextID();
           });
         }
@@ -193,6 +194,8 @@ export class Checkbox implements ComponentInterface {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
     };
+
+    this.hintTextID = this.getHintTextID();
   }
 
   disconnectedCallback() {

core/src/components/checkbox/test/validation/index.html

@@ -146,7 +146,7 @@ <h2>Optional Field (No Validation)</h2>
 
           const isInvalid = checkbox.classList.contains('ion-invalid');
           if (isInvalid) {
-            console.log('Field marked invalid:', checkbox.label, checkbox.errorText);
+            console.log('Field marked invalid:', checkbox.innerText, checkbox.errorText);
           }
         });
 

core/src/components/radio-group/radio-group.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { checkInvalidState } from '@utils/forms';
-import { renderHiddenInput } from '@utils/helpers';
+import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -171,6 +171,10 @@ export class RadioGroup implements ComponentInterface {
     this.isInvalid = checkInvalidState(this.el);
   }
 
+  componentWillLoad() {
+    this.hintTextID = this.getHintTextID();
+  }
+
   disconnectedCallback() {
     // Clean up validation observer to prevent memory leaks.
     if (this.validationObserver) {

core/src/components/radio-group/test/validation/index.html

@@ -157,7 +157,7 @@ <h2>Optional Field (No Validation)</h2>
 
           const isInvalid = radioGroup.classList.contains('ion-invalid');
           if (isInvalid) {
-            console.log('Field marked invalid:', radioGroup.label, radioGroup.errorText);
+            console.log('Field marked invalid:', radioGroup.id, radioGroup.errorText);
           }
         });
 

core/src/components/toggle/test/validation/index.html

@@ -146,7 +146,7 @@ <h2>Optional Field (No Validation)</h2>
 
           const isInvalid = toggle.classList.contains('ion-invalid');
           if (isInvalid) {
-            console.log('Field marked invalid:', toggle.label, toggle.errorText);
+            console.log('Field marked invalid:', toggle.innerText, toggle.errorText);
           }
         });
 

core/src/components/toggle/toggle.tsx

@@ -269,6 +269,8 @@ export class Toggle implements ComponentInterface {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
     };
+
+    this.hintTextID = this.getHintTextID();
   }
 
   private onStart() {