feat: Optional I/O or On/Off label for ion-toggle

[wilk-polarny]

Ionic version:
[x] 4.x

Describe the Feature Request
I would like to have optional labels on <ion-toggle> elements - in iOS, you are still able to enable labels within the accessibility settings. We would like to honor these settings and to have a way to enable labels for the respective platforms (iOS/Android).

Describe Preferred Solution
How? An optional parameter/directive would be nice.

It should look like this:

(Source: https://osxdaily.com/2014/04/15/ios-settings-switch-on-off-labels/)

As far as I know, there are also Android equivalents with on/off.

Describe Alternatives
I considered a DIY solution, but I'm not currently not sure how to achieve that effect without having to fork the Ionic project.

Related Code

<ion-toggle label="false"></ion-toggle>
<ion-toggle label="true"></ion-toggle>

Additional Context
None

[tawfiek]

I am working on this feature

[brandyscarney]

Thanks for the issue! Here's an example of how it could be done now using iOS: https://codepen.io/brandyscarney/pen/YzyxeXa

.ios.toggle-labels::before {
  position: absolute;

  top: 11px;
  right: 7px;

  content: "";

  width: 8px;
  height: 8px;

  border: solid 1px rgba(0, 0, 0, 0.23);

  border-radius: 50%;
}

.ios.toggle-labels::after {
  position: absolute;

  top: 12px;
  left: 11px;
  
  content: "";

  width: 10px;
  height: 10px;

  border-left: 1px solid #fff;
}

I like the idea of adding this for accessibility reasons, but we will need to think through how this should be handled in Material Design for Android. For example, if we add a label property to toggle, should it add the words "on/off" in md mode? If so, should the text for these be customizable? I would think it would need to be in order to support other languages. I'll need to discuss this with the team to determine how the API should look if we decide to add it as a feature, but the code above should get you very close to a native look for iOS.