feat(toggle): expose label wrapper as shadow part (#28585)

core/api.txt

@@ -1515,6 +1515,7 @@ ion-toggle,css-prop,--handle-width
 ion-toggle,css-prop,--track-background
 ion-toggle,css-prop,--track-background-checked
 ion-toggle,part,handle
+ion-toggle,part,label
 ion-toggle,part,track
 
 ion-toolbar,shadow

core/src/components/toggle/test/toggle.spec.ts

@@ -40,6 +40,19 @@ describe('toggle', () => {
       expect(t.enableOnOffLabels).toBe(true);
     });
   });
+
+  describe('shadow parts', () => {
+    it('should have shadow parts', async () => {
+      const page = await newSpecPage({
+        components: [Toggle],
+        html: `<ion-toggle>Label</ion-toggle>`,
+      });
+      const toggle = page.body.querySelector('ion-toggle')!;
+      expect(toggle).toHaveShadowPart('label');
+      expect(toggle).toHaveShadowPart('track');
+      expect(toggle).toHaveShadowPart('handle');
+    });
+  });
 });
 
 describe('ion-toggle: disabled', () => {

core/src/components/toggle/toggle.scss

@@ -105,13 +105,6 @@ input {
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
-  /**
-   * This ensures that double tapping this text
-   * clicks the <label> and focuses the input
-   * when a screen reader is enabled.
-   */
-  pointer-events: none;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;

core/src/components/toggle/toggle.tsx

@@ -23,6 +23,7 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
  *
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
+ * @part label - The label text describing the toggle.
  */
 @Component({
   tag: 'ion-toggle',
@@ -377,6 +378,7 @@ export class Toggle implements ComponentInterface {
               'label-text-wrapper': true,
               'label-text-wrapper-hidden': !this.hasLabel,
             }}
+            part="label"
           >
             <slot></slot>
           </div>