fix(checkbox): show labels after page navigation (#31062)

Issue number: resolves #31052

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
After a page navigation, ion-checkbox's `onslotchange` event fires
before the element's `textContent` has been updated. It is called again
after `textContent` becomes readable on Safari, but is not called again
after the `textContent` becomes readable on Chrome and Firefox.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Uses `MutationObserver` instead of `onslotchange` and fires
specifically on character data changes. This ensures `hasLabelContent`
is up to date.
- `MutationObserver` does not fire on load, so `hasLabelContent` is
initialized in `connectedCallback`

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

Author: OS-jacobbell

core/src/components/checkbox/checkbox.tsx

@@ -151,44 +151,54 @@ export class Checkbox implements ComponentInterface {
   connectedCallback() {
     const { el } = this;
 
-    // Watch for class changes to update validation state.
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-      this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(el);
-        if (this.isInvalid !== newIsInvalid) {
-          this.isInvalid = newIsInvalid;
-          /**
-           * Screen readers tend to announce changes
-           * to `aria-describedby` when the attribute
-           * is changed during a blur event for a
-           * native form control.
-           * However, the announcement can be spotty
-           * when using a non-native form control
-           * and `forceUpdate()`.
-           * This is due to `forceUpdate()` internally
-           * rescheduling the DOM update to a lower
-           * priority queue regardless if it's called
-           * inside a Promise or not, thus causing
-           * the screen reader to potentially miss the
-           * change.
-           * By using a State variable inside a Promise,
-           * it guarantees a re-render immediately at
-           * a higher priority.
-           */
-          Promise.resolve().then(() => {
-            this.hintTextId = this.getHintTextId();
-          });
+      this.validationObserver = new MutationObserver((mutations) => {
+        // Watch for label content changes
+        if (mutations.some((mutation) => mutation.type === 'characterData' || mutation.type === 'childList')) {
+          this.hasLabelContent = this.el.textContent !== '';
+        }
+        // Watch for class changes to update validation state.
+        if (mutations.some((mutation) => mutation.type === 'attributes' && mutation.target === el)) {
+          const newIsInvalid = checkInvalidState(el);
+          if (this.isInvalid !== newIsInvalid) {
+            this.isInvalid = newIsInvalid;
+            /**
+             * Screen readers tend to announce changes
+             * to `aria-describedby` when the attribute
+             * is changed during a blur event for a
+             * native form control.
+             * However, the announcement can be spotty
+             * when using a non-native form control
+             * and `forceUpdate()`.
+             * This is due to `forceUpdate()` internally
+             * rescheduling the DOM update to a lower
+             * priority queue regardless if it's called
+             * inside a Promise or not, thus causing
+             * the screen reader to potentially miss the
+             * change.
+             * By using a State variable inside a Promise,
+             * it guarantees a re-render immediately at
+             * a higher priority.
+             */
+            Promise.resolve().then(() => {
+              this.hintTextId = this.getHintTextId();
+            });
+          }
         }
       });
 
       this.validationObserver.observe(el, {
         attributes: true,
         attributeFilter: ['class'],
+        characterData: true,
+        childList: true,
+        subtree: true,
       });
     }
 
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
+    this.hasLabelContent = this.el.textContent !== '';
   }
 
   componentWillLoad() {
@@ -267,10 +277,6 @@ export class Checkbox implements ComponentInterface {
     ev.stopPropagation();
   };
 
-  private onSlotChange = () => {
-    this.hasLabelContent = this.el.textContent !== '';
-  };
-
   private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
@@ -387,7 +393,7 @@ export class Checkbox implements ComponentInterface {
             id={this.inputLabelId}
             onClick={this.onDivLabelClick}
           >
-            <slot onSlotchange={this.onSlotChange}></slot>
+            <slot></slot>
             {this.renderHintText()}
           </div>
           <div class="native-wrapper">