diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js index d3bfdfbec2c..50749344e4c 100644 --- a/src/components/tooltip/tooltip.js +++ b/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); } } diff --git a/src/components/tooltip/tooltip.spec.js b/src/components/tooltip/tooltip.spec.js index 874a0a756f0..c38d56351ef 100644 --- a/src/components/tooltip/tooltip.spec.js +++ b/src/components/tooltip/tooltip.spec.js @@ -67,6 +67,36 @@ describe(' directive', function() { expect(element.attr('aria-label')).toEqual('Tooltip'); }); + it('should interpolate the aria-label', function(){ + buildTooltip( + '' + + '{{ "hello" | uppercase }}' + + '' + ); + + expect(element.attr('aria-label')).toBe('HELLO'); + }); + + it('should update the aria-label when the interpolated value changes', function(){ + buildTooltip( + '' + + '{{ testModel.ariaTest }}' + + '' + ); + + $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' : '' };