Radios should activate ripple when their corresponding label is pressed

[traviskaufman]

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

v2 @ master

What browser(s) is this bug affecting (including version)?

all

What OS (and version) are you using?

OS X El Capitan

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

1. Type npm run dev and navigate to http://localhost:8080/radio.html
2. Click on a label for a radio

What is the expected behavior?

The ink ripple should activate

What is the actual behavior?

Only the focus ripple activates

Any other information you believe would be useful?

This is due to the fact that isSurfaceActive is always set to false in the radio's ripple adapter. Instead, we need to set it conditionally based on whether or not the label is being interacted with.

Copied from google/material-design-lite#4830

[traviskaufman]

Since input control components don't know about their labels implicitly, this one maybe tricky to implement. Let's discuss solutions here before deciding on a concrete implementation.

[sgomes]

Proposal 1: fire ripple on focus, if not currently rippling.

Add a focus event listener to the native radio control, trigger ripple when received (if not currently rippling).

The downside is that a ripple would also be triggered when tabbing to the element, which I'm not sure is desirable. Distinguishing between a tab focus and a label click focus would require either a global event listener, or a DOM search + event listener addition to every label that may be associated with the control (both undesirable).

Requirements: A mechanism for firing a ripple animation on demand in MDCRipple. A mechanism for determining if a ripple is currently in progress in MDCRadio.

Proposal 2: implement ripple-triggering in mdc-form-field.

Expose a fireRipple() method in the radio component. In mdc-form-field init, add a click event listener to the label (if present), and have it trigger fireRipple() in the control (if present).

The major downside is that mdc-form-field would become a JS component, when it's currently a CSS-only component. One other downside is that a label would only trigger a ripple effect on a radio if inside of an mdc-form-field block.

Requirements: A mechanism for firing a ripple animation on demand in MDCRipple.

@traviskaufman @amsheehan WDYT?

[amsheehan]

I wonder if the caveat for Proposal 2 is such a big deal since we may have to fix autofill textfields with JavaScript anyway (#137)

Seems like triggering a ripple from tabbing (as in proposal 1), unless we implement that on all form elements, might be distracting. That could also be a question for other members of Material Design as well.

[traviskaufman]

Proposal 2 seems best, however it seems like a lot of work. Let's confirm with design that this UX is best moving forward, and if so, we'll implement.