feat(toggle): add toggleOnOffLabels global config option (#26087)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

Author: EinfachHans

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

@@ -0,0 +1,43 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { config } from '../../../global/config';
+import { Toggle } from '../toggle';
+
+describe('toggle', () => {
+  beforeEach(() => {
+    config.reset({});
+  });
+
+  const newToggle = async (): Promise<Toggle> => {
+    const { rootInstance } = await newSpecPage({
+      components: [Toggle],
+      html: `<ion-toggle></ion-toggle>`,
+    });
+    return rootInstance;
+  };
+
+  describe('enableOnOffLabels', () => {
+    it('should disable on/off labels when setting to false on component', async () => {
+      const t = await newToggle();
+      t.enableOnOffLabels = false;
+      config.reset({
+        toggleOnOffLabels: true,
+      });
+      expect(t.enableOnOffLabels).toBe(false);
+    });
+
+    it('should enable on/off labels when setting to true on global config', async () => {
+      config.reset({
+        toggleOnOffLabels: true,
+      });
+      const t = await newToggle();
+      expect(t.enableOnOffLabels).toBe(true);
+    });
+
+    it('should enable on/off labels when setting to true on component', async () => {
+      const t = await newToggle();
+      t.enableOnOffLabels = true;
+      expect(t.enableOnOffLabels).toBe(true);
+    });
+  });
+});

core/src/components/toggle/toggle.tsx

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
 import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
@@ -67,7 +68,7 @@ export class Toggle implements ComponentInterface {
   /**
    * Enables the on/off accessibility switch labels within the toggle.
    */
-  @Prop() enableOnOffLabels: boolean | undefined = undefined;
+  @Prop() enableOnOffLabels: boolean | undefined = config.get('toggleOnOffLabels');
 
   /**
    * Emitted when the value property has changed.

core/src/utils/config.ts

@@ -64,6 +64,11 @@ export interface IonicConfig {
    */
   spinner?: SpinnerTypes;
 
+  /**
+   * Overrides the default enableOnOffLabels in all `<ion-toggle>` components.
+   */
+  toggleOnOffLabels?: boolean;
+
   /**
    * Overrides the default spinner for all `ion-loading` overlays, ie. the ones
    * created with `ion-loading-controller`.