Material icons should be accessible

[marcysutton]

To be accessible, <md-icon> needs two things:

1. aria-label should be enforced. (see Improving aria-label warnings #344)
2. The nested <object> tag needs wmode="opaque" or wmode="transparent" since it is for presentation only (Flash a11y best practices)

I remember something about a refactor possibly forthcoming, I just wanted to capture these requirements.

[marcysutton]

This is still an issue, and it has implications for other components such as <md-button> (which is used with <md-tooltip>. No label is required on <md-icon> itself, leaving the parent element responsible for labeling (and throwing errors). For example:

<md-button class="md-fab md-primary">
  <md-tooltip>
    Refresh
  </md-tooltip>
  <md-icon icon="/img/icons/ic_refresh_24px.svg"></md-icon>
</md-button>

This fails for accessibility because <md-tooltip> does not provide an accessible name for <md-button>. This should be the responsibility of <md-icon>, either by providing aria-label or some other labeling mechanism.

If we enforce aria-label on <md-icon>, we will need to update $mdAria.expect to check for aria-label on child nodes. Opened issue #567.

[ThomasBurleson]

Related to #612, #567

[marcysutton]

Additional resources:

• http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
• http://www.sitepoint.com/tips-accessible-svg/