Material: icon: Providing empty alt or aria-label attributes do not fully hide icon from assistive tech

[katiehockman]

Actual Behavior:

• What is the issue? *
  Defining alt="" and aria-label="" on md-icon elements do not fully hide the icon from assistive technology. The documentation states that defining those attributes as empty will put aria-hidden="true" on the element, but this doesn't happen.
• What is the expected behavior? *
  Defining either (or both) alt="" or aria-label="" should set aria-hidden="true" to the md-icon element. The icon name should not be used as an alternative aria-label if no aria-label is available. By defining aria-hidden="true" this element this will fully hide the element from assistive technology.

CodePen (or steps to reproduce the issue): *

• Details: Add aria-label="" to an md-icon with role="img" and/or add alt="" to an md-icon with role="img". Use a screen reader to navigate to the image element - It will be navigable by a screen reader but will have no label.

AngularJS Versions: *

• AngularJS Version:
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Chrome
• Browser Version: * Version 58.0.3029.110 (64-bit)
• OS: * macOS Sieera Version 10.12.5
• Stack Traces:
• Screen Reader: Voiceover (likely others as well)

[ThomasBurleson]

@katiehockman - do you have a reproducible issue/Plunkr ?

[katiehockman]

https://codepen.io/katiehockman/pen/GEjRKz
Thanks!

[ThomasBurleson]

@EladBezalel - can you fix this one also?

[clshortfuse]

Note that the codepen is testing against 1.1.0.

Still, in master, there's no logic in mdIcon that checks if the attribute exists, only if it is truthy (if (attr.alt)). Performing a hasAttribute check would fix it. Alternatively, a null-check (alt == null) could work as well, though that would include an implicit conversion.

[ThomasBurleson]

Here is an updated CodePen using latest/HEAD from AngularJS Material: https://codepen.io/angular-flex-layout/pen/eRBVpX

Note the link to explicitly load the material-design icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

[katiehockman]

The demo provided still has the issue where providing only an empty alt attribute still creates an aria-label with the inner HTML of the md-icon element. Since the documentation for alt says that "If an empty string is provided, icon will be hidden from accessibility layer", the current implementation will mislead users.

For example:

<md-icon alt="">something</md-icon>
    creates
<md-icon alt="" aria-label="something">something</md-icon>

A few other thoughts/issues:

• Adding an alt attribute with some label text (and no aria-label) creates an element with both an aria-label and an alt attribute with identical text. This could cause unexpected results with assistive technology.
• Why do both aria-label and alt need to be in the documentation? When I tested with Voiceover, the alt attribute isn't read by assistive technology, only the aria-label is. So it is perhaps okay to allow users to provide either an aria-label or an alt attribute, but it should always propogate to an aria-label on the rendered element.
• The documentation should not say that empty alt/aria-label hides from the accessibility layer with aria-hidden="true". That's not what's happening here, and could be misleading for developers.