feat: add haptic feedback to Toggle in Safari on iOS 18+

[jedlikowski]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Safari since iOS 18 supports haptic feedback on checkbox elements via a non-standard switch attribute. We could use it to provide haptic feedback when switching Toggle in non-hybrid environments. This could be a workaround for lack of support for Vibration API in Safari.

Describe the Use Case

Adding haptic feedback to Toggle component in non-hybrid environments would improve native feel of web and PWA apps built with Ionic.

Describe Preferred Solution

To trigger haptic feedback programatically we need an <input type=checkbox switch> element with an associated <label> element. With this setup, when we programatically trigger click() on the label, safari will emit the haptic feedback.

Describe Alternatives

Keep current implementation and wait for Safari to implement Vibration API (if it ever does).

Related Code

Codepen provided in WebKit release notes, demonstrating haptic feedback in checkbox of type switch: https://codepen.io/jensimmons/pen/GReLKWg

Additional Information

No response

[DwieDima]

This sounds really interesting!
Would you mind to also include the option to configure this using IonicConfig with defaults to false?

You can find a similar PR for config extension here.

[jedlikowski]

Hi @DwieDima, thanks for the suggestion 🙇 Added configurability to my PR 😄