Develop example of switch design pattern

[mcking65]

This issue is dependent on issue #162.

Preview link for work in progress

Switch example in switch branch

[ZoeBijl]

Work on this is done in the “switch” branch. You can follow progress on the live example.

[ZoeBijl]

Got approval to use Carri Craver’s design.

[Owlbertz]

Because I recently stumbled upon accessibility of a switch, I found this one. I just noticed that the switch can only be operated using space and not enter. What's the reason for this behavior?

[ZoeBijl]

@Owlbertz because that’s the way native switches and checkboxes behave.

Tested with native switches on Windows 10 and native checkboxes on macOS 10.13.

[Owlbertz]

@ZoeBijl Ok, so you compare the switch to checkboxes. I guess I was thinking about a button with the aria-pressed flag set.
But I think comparing native controls is the right way to go, so I think you're right.

[annabbott]

No issues noted.

[jnurthen]

Needs to have a greater contrast in the off state to meet WCAG 2.1

[stes-acc]

Examples are insufficient.
What if Switch itself has a label inside that dynamically changes based on switch state? (e.g. On/Off)

[jnurthen]

@stes-acc Can you submit a separate issue for this. It would be helpful if you could provide a link to an example which demonstrates the feature so there is clarity as to what is being requested.