Material: aria-label should be an expression

[kschwidder]

aria-label is currently a string which does not play nicely with multi-lingual apps. It should be an expression or string. In common apps you will set the label as {{LABEL | translate}}

[marcysutton]

Hi, which component(s) are you talking about? Not everything uses aria-label.

[kschwidder]

md-button primarily

[marcysutton]

@kschwidder I was able to use angular-translate successfully for the aria-label on md-button with no problems–the text swapped out when I changed the preferred language. Can you provide more details on your situation? Are you actually finding errors or restrictions?

[kschwidder]

Can you share the code example ? I have tried it with aria-label="{{'MYLABEL' | translate}}".

[marcysutton]

I followed the docs on http://angular-translate.github.io/docs/#/guide and made local changes to our button demos to prove it worked (without committing). It looked something like this:

var app = angular.module('myApp', ['ngMaterial', 'pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('en', {
    'CAKE': 'Eat cake'
  });
  $translateProvider.translations('de', {
    'CAKE': 'Cake eten'
  });
  $translateProvider.preferredLanguage('en');
}]);

<md-button aria-label="{{'CAKE' | translate}}"><span class="icon"></span></md-button>

[kschwidder]

Will check again. Thx ! Will close the issues

[mxab]

Hi, would it be better to have a aria-label-translate="CAKE" directive because as far as I understand it the translate filter is stateful and therefore should be not used to often?

[johnrix]

Here's a directive for that which I stumbled on.