mdTooltip: Aria-label added for md-tooltip but not interpolated.

[ErinCoughlan]

md-tooltip adds an aria-label to the element (source), but if the text in the md-tooltip is {{ text }}, the aria-label is also set to {{ text }}. When the text is displayed in the tooltip, it's correctly interpolated, but the aria-label is still wrong.

[jelbourn]

@marcysutton do you know anything about tooltip aria-labels ?

[oemmes]

I just stumbled upon this issue, too. Would be nice if it gets fixed.

As a workaround one can add the aria-label attribute on the parent manually with the same (interpolated) value, though that's quite some work and duplication if there are lots of tooltips...

[marcysutton]

Text put into a tooltip is copied to a parent button element so it has text in it when the user focuses on the button...waiting for the tooltip to show wouldn't guarantee enough time for assistive technology to catch it. The demos show aria-label hard-coded, but it's redundant since mdTooltip copies that text anyway. I think it just needs to be compiled instead of grabbing .text() directly.

@oemmes which parent element are you putting it on? The aria-label attribute needs to be on a button or other focusable element so it will be announced in a screen reader.

[jelbourn]

Compiling it would be a bad idea- that could lead to xss. Using $interpolate should be safe, though.

[oemmes]

@marcysutton I'm using the tooltip for an md-button, so I put the aria-label on md-button like this:

<md-button aria-label="{{'configurator.actions.share' | translate}}" class="md-fab md-raised" ng-click="shareArticle()">
    <md-tooltip>{{'configurator.actions.share' | translate}}</md-tooltip>
    <md-icon class="icon icon-share"></md-icon>
</md-button>

On the other hand it would be nice if one could use md-tooltip as an attribute on an (focusable) element which has a title or an aria-label attribute. md-tooltip would fetch the title or aria-label and create the tooltip for it. Markup could be then:

<md-button aria-label="{{'configurator.actions.share' | translate}}" md-tooltip class="md-fab md-raised" ng-click="shareArticle()">
    <md-icon class="icon icon-share"></md-icon>
</md-button>

[jelbourn]

Additional report from @kbae00

When the parent of an md-tooltip doesn't have an aria-label, the addAriaLabel function in tooltip.js adds one by setting the aria-label value to "element.text().trim()". In the case of a particular directive I'm working on, the value passed into the directive uses variables. These are fine for the md-tooltip in the directive template, but the aria-label that gets set on the parent element becomes "{{variable1 name}} ({{variable2 name}})" and that is what a screen reader ends up verbalizing: "left brace left brace variable1 name right brace right brace...". I suspect this is happening because of the way the aria-label is being set "element.text().trim()". It would be nice to have the interpreted values work as aria labels and to not have to explicitly set an aria-label on the parent to get around this.