Fix accessibility of first-time-flow terms checkboxes

[whymarrh]

See ARIA: checkbox role for context.

This PR fixes one part of the accessibility of our checkboxes in the on-boarding flow. We were previously creating custom checkboxes without the correct assistive properties. In part, this now allows keyboard users to tab to and check the checkbox.

[Gudahtt]

I wonder - could we instead replace this with an HTML checkbox?

From that MDN article, under "Best Practices":

The first rule of ARIA is: if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding an ARIA role, state or property to make it accessible. As such, it is recommended to use the native HTML checkbox using form control instead of recreating a checkbox's functionality with JavaScript and ARIA.

[whymarrh]

We would have a hard time styling the native checkbox to look like the one we have the design. I believe that's what lead to the custom implementation.

[Gudahtt]

Hmm. Is it that hard? I think something like this would work: http://jsfiddle.net/go392m5s/
Except you'd set a background-image for the :checked state.

I knew this used to be difficult, but I thought custom styles were easy today because native styles can be disabled with appearance: none.

[Gudahtt]

Looks good!

It would be nice to try using an HTML input, and moving this to a reusable component. But we can consider those another time.

[whymarrh]

Yeah I think this is the best immediate change, we should definitely consider replacing theses.