feat(toggle): make iOS haptic feedback configurable

Author: jedlikowski

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

@@ -1,3 +1,4 @@
+import { setMode } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { config } from '../../../global/config';
@@ -53,6 +54,21 @@ describe('toggle', () => {
       expect(toggle).toHaveShadowPart('handle');
     });
   });
+
+  describe('iOS haptic feedback', () => {
+    it('should render additional elements when enabled in config', async () => {
+      setMode(() => 'ios');
+      const t = await newToggle();
+      expect(t['hapticEl']).toBeNull();
+
+      config.reset({
+        toggleIOSHapticFeedback: true,
+      });
+
+      const t2 = await newToggle();
+      expect(t2['hapticEl']).not.toBeNull();
+    });
+  });
 });
 
 describe('ion-toggle: disabled', () => {

core/src/components/toggle/toggle.tsx

@@ -34,7 +34,8 @@ export class Toggle implements ComponentInterface {
   private inputId = `ion-tg-${toggleIds++}`;
   private gesture?: Gesture;
   private focusEl?: HTMLElement;
-  private hapticEl?: HTMLElement;
+  private enableIOSHapticFeedback = config.getBoolean('toggleIOSHapticFeedback', false);
+  private hapticEl?: HTMLElement | null = null;
   private lastDrag = 0;
   private inheritedAttributes: Attributes = {};
   private toggleTrack?: HTMLElement;
@@ -139,7 +140,7 @@ export class Toggle implements ComponentInterface {
     const isNowChecked = !checked;
     this.checked = isNowChecked;
 
-    if (this.hapticEl) {
+    if (this.enableIOSHapticFeedback && this.hapticEl) {
       this.hapticEl.click();
     }
 
@@ -300,7 +301,7 @@ export class Toggle implements ComponentInterface {
     const { inputId } = this;
     const mode = getIonMode(this);
 
-    if (hapticAvailable() || mode !== 'ios') {
+    if (!this.enableIOSHapticFeedback || hapticAvailable() || mode !== 'ios') {
       return;
     }
 

core/src/utils/config.ts

@@ -71,6 +71,13 @@ export interface IonicConfig {
    */
   toggleOnOffLabels?: boolean;
 
+  /**
+   * Whenever changing the toggle state should produce a haptic feedback (slight vibration)
+   * on iOS in browser and PWA environments. Requires iOS 18 or later.
+   * Defaults to `false`.
+   */
+  toggleIOSHapticFeedback?: boolean;
+
   /**
    * Overrides the default spinner for all `ion-loading` overlays, ie. the ones
    * created with `ion-loading-controller`.