fix(tooltip): interpolate the tooltip text when adding it to the aria…

…-label

Fixes the raw tooltip text text being added to the parent, if a tooltip contained a data binding, instead of the interpolated value.

Fixes #6855.

Closes #8170

src/components/tooltip/tooltip.js

@@ -33,7 +33,7 @@ angular
  * @param {string=} md-direction Which direction would you like the tooltip to go?  Supports left, right, top, and bottom.  Defaults to bottom.
  */
 function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $rootElement,
-                            $animate, $q) {
+                            $animate, $q, $interpolate) {
 
   var TOOLTIP_SHOW_DELAY = 0;
   var TOOLTIP_WINDOW_EDGE_SPACE = 8;
@@ -150,11 +150,22 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
         element.remove();
         attributeObserver && attributeObserver.disconnect();
       });
+
+      // Updates the aria-label when the element text changes. This watch
+      // doesn't need to be set up if the element doesn't have any data
+      // bindings.
+      if (element.text().indexOf($interpolate.startSymbol()) > -1) {
+        scope.$watch(function() {
+          return element.text().trim();
+        }, addAriaLabel);
+      }
     }
 
-    function addAriaLabel () {
-      if (!parent.attr('aria-label') && !parent.text().trim()) {
-        parent.attr('aria-label', element.text().trim());
+    function addAriaLabel (override) {
+      if ((override || !parent.attr('aria-label')) && !parent.text().trim()) {
+        var rawText = override || element.text().trim();
+        var interpolatedText = $interpolate(rawText)(parent.scope());
+        parent.attr('aria-label', interpolatedText);
       }
     }
 

src/components/tooltip/tooltip.spec.js

@@ -67,6 +67,36 @@ describe('<md-tooltip> directive', function() {
       expect(element.attr('aria-label')).toEqual('Tooltip');
   });
 
+  it('should interpolate the aria-label', function(){
+      buildTooltip(
+        '<md-button>' +
+         '<md-tooltip>{{ "hello" | uppercase }}</md-tooltip>' +
+        '</md-button>'
+      );
+
+      expect(element.attr('aria-label')).toBe('HELLO');
+  });
+
+  it('should update the aria-label when the interpolated value changes', function(){
+      buildTooltip(
+        '<md-button>' +
+         '<md-tooltip>{{ testModel.ariaTest }}</md-tooltip>' +
+        '</md-button>'
+      );
+
+      $rootScope.$apply(function() {
+        $rootScope.testModel.ariaTest = 'test 1';
+      });
+
+      expect(element.attr('aria-label')).toBe('test 1');
+
+      $rootScope.$apply(function() {
+        $rootScope.testModel.ariaTest = 'test 2';
+      });
+
+      expect(element.attr('aria-label')).toBe('test 2');
+  });
+
   it('should not set parent to items with no pointer events', inject(function($window){
     spyOn($window, 'getComputedStyle').and.callFake(function(el) {
         return { 'pointer-events': el ? 'none' : '' };