fix(toggle): swipe gesture applies to knob

[liamdebeasi]

Issue number: resolves #27254

---

What is the current behavior?

The swipe gesture is currently applied to the entire ion-toggle element. This was fine for the legacy syntax, but with the modern syntax it means users can swipe on the label text which is not correct.

What is the new behavior?

• The toggle now creates the gesture on the .toggle-icon element which is the container for the knob for both modern and legacy syntaxes.
• Moved touch-action: none to the host of the legacy toggle. This was preventing scrolling from happening on the modern toggle. I double checked with native iOS and you can scroll when a pointer moves over a toggle.

The structure of this fix was designed to match what ion-range does:

ionic-framework/core/src/components/range/range.tsx

Lines 282 to 296 in a874992

	private setupGesture = async () => {
	const rangeSlider = this.rangeSlider;
	if (rangeSlider) {
	this.gesture = (await import('../../utils/gesture')).createGesture({
	el: rangeSlider,
	gestureName: 'range',
	gesturePriority: 100,
	threshold: 0,
	onStart: (ev) => this.onStart(ev),
	onMove: (ev) => this.onMove(ev),
	onEnd: (ev) => this.onEnd(ev),
	});
	this.gesture.enable(!this.disabled);
	}
	};

Modern	Legacy
Screen.Recording.2023-04-20.at.12.34.53.PM.mov	Screen.Recording.2023-04-20.at.12.35.19.PM.mov

Does this introduce a breaking change?

• Yes
• No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

This is removed from the .toggle-icon element so users can swipe on the element.

[liamdebeasi]

I added another part of the fix so re-requesting reviews:

Moved touch-action: none to the host of the legacy toggle. This was preventing scrolling from happening on the modern toggle. I double checked with native iOS and you can scroll when a pointer moves over a toggle.

See 656526f

[lincolnthree]

Dev build works great in my testing.

[sean-perkins]

Nice work 👍