feat(toggle): on/off icons for toggle

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

The Toggle component does not support the accessibility indications for the toggle checked state.

Issue URL: #20524

What is the new behavior?

Introduces the switchLabelsEnabled property to ion-toggle, that developers can use to enable the icon indicators for the toggle's checked state.

For Material Design, the checkbox icon will display when the toggle is checked. When the toggle is unchecked, the minus icon will display.

For iOS, the "I" icon will display when the toggle is checked. When the toggle is unchecked, the "O" icon will display. iOS renders both icons in the DOM, in order to accomplish the pulling effect when the toggle changes state.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.1.10-dev.11655149274.1a5ec2d4

[liamdebeasi]

The "-" does not show up in dark mode:

Also the checkmark text appears black. We should probably add some screenshot tests for dark mode.

[liamdebeasi]

Also the I/O label supposed to appear, not slide in on iOS

native	ionic
RPReplay_Final1655153868.MP4	RPReplay_Final1655153898.MP4

---

Somewhat related, but when dragging the toggle the "O" label overlaps the handle

native	ionic
RPReplay_Final1655154138.MP4	RPReplay_Final1655153911.MP4

[sean-perkins]

Pushed an update to fix the colors for iOS to align with the spec. This does cause an issue with ion-toggle when color="dark" and the toggle is checked:

Unsure if we should concern ourself with overriding the text color for this, since it isn't within the iOS spec.

I'll need to do some more discovery into rendering of the icons. Originally when just having the icon flip on iOS (like it does for MD), it made the animation of the knob look choppy. It looks like when the knob is active, I need to set the opacity of the icons to zero (and make sure the icons have a transition for opacity).

[liamdebeasi]

When rendering the on icon over an element with an Ionic color, it might be easiest to use the contrast (ex: var(--ion-color-primary-contrast) color. That should work for both light and dark mode.

For the off text, you might be able to use a step color? The color would change slightly across light vs. dark mode, but I don't know if it really matters (as long as the text is accessible). A benefit of using a stepped color is it is easy for developers to customize on a global level. Full customization is out of scope for this task, but using a stepped color would at least let developers customize the text color without much hassle. (For example, if a developers customized the track color, our default color may not be accessible when used on the new track color)

[sean-perkins]

Ok, I think this is finally ready for another review. Was getting burned by trying to nest our SASS mixins:

@include ltr() {
  @include position(x, x, x, x);
}

Instead of just using the positioning values directly and disabling stylelint.

[liamdebeasi]

The "O" doesn't seem to be centered

[liamdebeasi]

How does the color get set for the "O" on iOS mode?

This definitely some scope creep, so feel free to ignore this for now... But what if we had a global css var for this?

For example, tab bar has a default background that can be customized with --ion-tab-bar-background:

ionic-framework/core/src/themes/ionic.theme.default.md.scss

Line 17 in 1b1b1a3

$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default;

Reason why I bring it up is iOS does change the on/off text color when adding high contrast mode.

[sean-perkins]

The "O" label appears to be vertically centered. On iOS it is not horizontal aligned (it appears to be offset further to the left than the right). The screenshot is at 150% zoom.

Your screenshot appears to draw the SVG asset thicker 🤔

[liamdebeasi]

Another thought: It might be better to do some more design work around this CSS Variable idea we've been playing with. I'd be fine merging this feature in for now, and then we can figure out the CSS Variable stuff next sprint. Does that work for you? I think this feature is great and pretty much done, so I don't think it makes sense to hold this up on the CSS Variable detail.

[sean-perkins]

Yeah I can revert the CSS variable changes and leave them static for now.

[liamdebeasi]

The "on" label looks great:

(Top is native iOS, bottom is Ionic)

The "off" label still is not centered on the x-axis:

(Top is native iOS, bottom is Ionic).

Everything else in the PR looks great!

[liamdebeasi]

Much better. Great job!