Implement Switch Component

[traviskaufman]

Spec reference: https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch

Copied from google/material-design-lite#4478

[amsheehan]

WIP Codepen:

https://codepen.io/amsheehan/pen/YNxvaJ?editors=1100

[traviskaufman]

The overall UI looks excellent. Only thing is I can't seem to get it to handle keyboard and focus in Chrome, but I address that below. Here are my notes:

• The use of ::before/::after to draw the switch element is really clever. However, it may present problems when it comes to how to properly display the focus ring, since the focus ring has to track the switch's knob. It may be easier to have mdc-switch__background act as the track and then have an mdc-switch__knob element as its child. Then mdc-switch__knob::after could function as the focus ring.
• The mdc-switch__background element should probably have role="presentation" on it, since it is used purely as presentational markup (side note: we should probably do this same thing for checkboxes and radios).
• Labels shouldn't be inside the component.
• Instead of calling the checkbox class mdc-toggle, we should probably call it mdc-switch__native-control. This adheres to the conventions we use for checkboxes and radios.
• For the checkbox input, instead of using visibility: hidden, try absolutely positioning it, making it cover the element (set top/right/bottom/left to 0), and set opacity: 0;. This ensures that the checkbox is invisible visually, but not at all hidden from assistive technology. Also, it ensures that the checkbox will be focused and receive all mouse events since it's highest in the stacking order, meaning that keyboard focus and controls will work.
• Transitions should target the transform property rather than margin, and background-color rather than background. The latter is so the browser can be extremely precise in keeping track of exactly what it needs to animate.