fix(checkbox): re-evaluate label visibility when label is updated (#30980)

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Checkbox's render function applies the `label-text-wrapper-hidden` css
class when there is no label text to prevent extra margin from being
added. The render function is not re-evaluated if the label is updated.
This causes a problem in Angular where dynamic variables get applied
after the page is loaded, and a checkbox using a variable as a label
gets stuck with its label hidden until something else triggers a
re-render, e.g. ticking the box.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The checkbox will be re-rendered, and css classes will be updated,
when the label text is changed.
- Updated tests to check that the label is visible after changing from
blank to having content.
## 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.
-->

packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts

@@ -8,13 +8,19 @@ test.describe('Value Accessors', () => {
 
     test('should update the form value', async ({ page }) => {
       await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: false }, null, 2));
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-pristine/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-pristine/);
 
-      await page.locator('ion-checkbox').click();
+      await page.getByRole('checkbox', { name: 'Static Checkbox Label' }).click();
 
       await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: true }, null, 2));
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-dirty/);
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-valid/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-dirty/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-valid/);
+
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toBeVisible();
+    });
+
+    test('should display dynamically set label', async ({ page }) => {
+      await expect(page.getByRole('checkbox', { name: 'Dynamic Checkbox Label' })).toBeVisible();
     });
   });
 

packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html

@@ -6,6 +6,7 @@
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-checkbox formControlName="checkbox">Checkbox</ion-checkbox>
+    <ion-checkbox formControlName="checkbox">Static Checkbox Label</ion-checkbox>
   </app-value-accessor-test>
+  <ion-checkbox>{{dynamicLabel}}</ion-checkbox>
 </div>

packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts

@@ -15,6 +15,11 @@ import { ValueAccessorTestComponent } from "../value-accessor-test/value-accesso
   ]
 })
 export class CheckboxComponent {
+  dynamicLabel = '';
+
+  ngAfterViewInit(): void {
+    this.dynamicLabel = 'Dynamic Checkbox Label';
+  }
 
   form = this.fb.group({
     checkbox: [false, Validators.required],