From 43e2b3975d003e29b8060e5f5484bfb3daf457a2 Mon Sep 17 00:00:00 2001
From: Hans <hanskrywaa@web.de>
Date: Mon, 31 Oct 2022 15:49:15 +0100
Subject: [PATCH] feat(toggle): add toggleOnOffLabels global config option
 (#26087)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 .../src/components/toggle/test/toggle.spec.ts | 43 +++++++++++++++++++
 core/src/components/toggle/toggle.tsx         |  3 +-
 core/src/utils/config.ts                      |  5 +++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/toggle/test/toggle.spec.ts

diff --git a/core/src/components/toggle/test/toggle.spec.ts b/core/src/components/toggle/test/toggle.spec.ts
new file mode 100644
index 0000000000..6e6eedd619
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index d7e941d0a1..6e66b052b7 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/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.
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index ecb07cefc1..9c9b405566 100644
--- a/core/src/utils/config.ts
+++ b/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`.