Buttons require a visual focus state

[marcysutton]

To make flat and raised buttons accessible from the keyboard, they should have visual contrast upon user interaction. In the Material Design spec, focus states are illustrated with a ripple effect:

A similar ripple effect is needed to add focus states to all buttons.

[marcysutton]

@ThomasBurleson are you the person in charge of ripple effects? There is still some work to be done for buttons and link buttons to be accessible, in addition to this focus style.

[ThomasBurleson]

Yes, I am the primary author for effects.js and ink-stuff.
Shall we work together on Monday for button ARIA ?

Btw, inkFocus is an outstanding feature item to be worked on next week. (@see #175)

[ThomasBurleson]

This will mostly like be resolved with approach similar to that used within the new css Ink Ripples solution.

[ajoslin]

Waiting on input from UX team.

[scarletsky]

Hello, I found that on the demo site, a .focus class will add to material-button after clicking it. And the .focus class will remove when I click other place.

It probably cause by

material/src/components/buttons/buttons.js

Lines 82 to 87 in ca7793d

	.on('focus', function() {
	element.addClass('focus');
	})
	.on('blur', function() {
	element.removeClass('focus');
	});

Don't you think it will be better to remove the .focus class after clicking it ？

[ThomasBurleson]

@scarletsky Perhaps I do not understand. The .focus class is used to indicate when the button has focus. If you remove the focus indicator after clicking, then you are not showing that the click has also selected the focusable button element.

[scarletsky]

@ThomasBurleson
This is just a UX question. I just feel confusing that why the .foucs class do not remove automatically.

[marcysutton]

@ThomasBurleson the class being added to trigger ink effects in JS, yes? The implementation looks fine to me, as long as there's no race condition with the tabIndex being set after (I don't think there would be, just calling it out).

@scarletsky the focus state should stay on the element as long as it's focused, not based on a time interval.