React example should clarify that it is CSS only

Bugs

The React example checkbox doesn’t clear the ripple. See below screenshots in Firefox and Chrome.

Having seen the demos - I assume this is because it is using the CSS only version. Viewing the demos shows the difference between the CSS only ripple (which stays until losing focus) and the JavaScript ripple which disappears immediately.

What MDC-Web Version are you using?

v0.6.0, React v15.4.1.

What browser(s) is this bug affecting?

Firefox v51.0.1 64-bit. Also tested on Chromium v56.0.2924.87 Fedora Project (64-bit)

What OS are you using?

Ubuntu 16.04 (Vagrant VM running on top of Fedora 25).

What are the steps to reproduce the bug?

1. Install and run the example

git clone [e-mail]:material-components/material-components-web.git
cd material-components-web/framework-examples/react/
npm install
npm run

1. In the browser http://localhost:3000
2. Tick the checkbox

What is the expected behavior?

The ripple should disappear. The most immediate example I can give you is from the Material UI Checkbox, or otherwise run the demos. The ripple spreads out and disappears after clicking the checkbox.

What is the actual behavior?

The ripple spreads out and stays there.

Firefox screenshot:

Chromium screenshot:

Any other information you believe would be useful?

The code is running on an Ubuntu VM - but I’m viewing the examples in browser on the host OS which is Fedora.

[Garbee]

Our CSS-only is built for maximum a11y, which means the focus state remains. As per the CSS spec’s for :focus. There is some movement going on where we can align better with the keyboard vs touch stuff later with a :focusring attribute perhaps, but that’s still early days.

The JS is built for maximum-fidelity to the MD spec. Which is why in this case with checkbox the halo is removed even though focus is still there. IMO, we actually shouldn’t do this for a11y and consistency, but it’s the spec and until they budge that’s the way it is.

I don’t think our buttons are completely done yet. As (last I recall, haven’t checked lately) the buttons don’t have the focus state when JS and ripples are turned on. Which also would act the same as checkboxes do now, and not show after click/tap but only when focused by other means (like keyboard navigation.)

Material UI, and any other material implementation even Polymer, doesn’t affect what we are doing here. The focus is on the Material Design specification’s guidelines in text, falling back to the images when unclear text is provided.

[amsheehan]

I believe this is actually the focus ring specified here

If you click outside of the checkbox, does the ring disappear? That is the expected behavior, and the behavior I see when I run the example locally.