fix(material/checkbox): NVDA reading out clickable before checkbox label

[crisbeto]

NVDA has some behavior where if an input is placed inside an element with a click or mousedown listener, the screen reader considers it as "clickable" and reads out "clickable" before its label. This is always the case for our checkbox components, because they have ripples on their parent nodes. These changes include the following fixes to address the issue.

1. For the non-MDC checkbox we move the input to the root of the component since it's invisible and it doesn't matter where we put it.
2. For the MDC checkbox we use the input as the ripple target. We can move the input around, because MDC uses sibling selectors for the checked styling. Furthermore, we take advantage of the fact the the input is stretched over the checkbox container.

[mmalerba]

based on screenshots in google this appears to have broken strong focus indicators for checkbox

[crisbeto]

Pushed a fix for the strong focus indicators.

[crisbeto]

I can't reproduce the original issue here anymore. Closing.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}