Material buttons should be accessible

[marcysutton]

Material Buttons currently have an interior button or anchor element that is not accessible. Buttons must be focusable and have text content or ARIA equivalents. To improve the accessibility of material-button, we should alter the component structure. It's actually not too far off in its current state, but the text content needs to go inside of the button element so it will be read aloud on focus:

<material-button class="material-button-raised">
    <canvas class="material-ink-ripple " style="top:0px; left:0px"></canvas>
    <button class="material-button-inner"></button>
    <span class="ng-scope">Button</span>
</material-button>

A more accessible button might look like this:

<material-button class="material-button-raised">
     <button class="material-button-inner">
        <canvas class="material-ink-ripple " style="top:0px; left:0px" 
                aria-hidden="true"></canvas>
        <span class="ng-scope">Button</span>
    </button>
</material-button>

The associated CSS should apply hover and focus styles to the internal button element. By using the native element, the role is communicated to assistive technologies by default, and tabIndex is also natively supported.

[marcysutton]

This also affects other components: material-dialog, material-sidenav, material-toast, and possibly other uses in the Angular Material project UI.

[ajoslin]

Can you check out the master version and verify material-button's accessibility?

[marcysutton]

Sweet, they are now interactive from the keyboard and accessible to a screen reader! We just need to work on focus styles, by letting :hover and :focus cascade to the actual button or anchor elements instead of material-button. We could leave that for #142.

[marcysutton]

@ThomasBurleson @ajoslin Should we close this and fix the remaining hover state in the other open issue?

[ajoslin]

Yes, good idea.