fix(mdButton): focus styles only on keyboard

[marcysutton]

This change limits focus styles to the keyboard and not on mouse clicks by setting a flag on mousedown and checking for that flag when a focus event happens. The goal is to make custom focus styles act more like native buttons, where clicking doesn't persist a focus style.

Related prototype: http://codepen.io/marcysutton/pen/GgxboO

Closes #1423, #142

[marcysutton]

Alternative approach uses CSS and ARIA tricks instead of events: http://codepen.io/marcysutton/pen/OPveqd

[gkalpak]

It is a (rather rare) corner-case, but what if the user places the mouse over the element and then uses the keyboard to press the button ?

[marcysutton]

@gkalpak I don't think it matters on buttons. On checkboxes and switches, however, this is an issue.

[marcysutton]

@ThomasBurleson can you take a look at this one? It will solve the problem with focus styles persisting on mouse click. For buttons, I think handling focus with events is better than creating and managing multiple elements. But they are both pretty hacky, to be honest.

[ThomasBurleson]

@marcysutton - let's review this together after ng-conf, etc.

[albertboada]

So, does the Material Design spec. not have a unique style for focus (instead of having to share one with hover)?
This looks like a very dodgy solution (probably from my ignorant point of view).

Edit:
Now that I see how native buttons behave, doesn't look like a bad idea at all!

[marcysutton]

@albertboada every solution to this problem is dodgy, quite frankly. It's a major and known limitation of browser focus/hover styles. Refer to this thread: #556 (comment)

[ThomasBurleson]

var mouseActive;
element.on('moveover', function onMouseOver() {
   mouseActive = true; 
  element.on('mouseleave', onMouseOut );
   element.off('mouseover', onMouseOver );
}

[ThomasBurleson]

@marcysutton - like it.