Focus style missing for certain md-buttons in docs

[marcysutton]

In the Angular Material docs, focus styles do not appear on API and Source md-buttons, negatively impacting keyboard accessibility. Upon further investigation, focus events do not seem to fire for these specific buttons, causing .focus classes to not be added when focused. See screenshots of keyboard interaction with md-buttons:

Focus on API <md-button> in toolbar does not show focus style or output to console:

Focus on demo example button does show style and output to console:

Relevant code from the compile function:

/* Line 80 of src/components/button/button.js */
innerElement
   .addClass('md-button-inner')
   .append(element.contents())
   // Since we're always passing focus to the inner element,
   // add a focus class to the outer element so we can still style
   // it with focus.
   .on('focus', function() {
      console.log(element);
      element.addClass('focus');
   })

@ajoslin any idea why these two instances of <md-button> would behave differently?

[marcysutton]

Recommending a refactor for <md-button> to use a native button element. @ajoslin we should be able to nest the ink-ripple and other child elements safely inside a <button>, correct?