fix(tooltip): use label instead of aria-describedby

src/components/tooltip/tooltip.js

@@ -72,6 +72,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
  manipulateElement();
  bindEvents();
  configureWatchers();
+ addAriaLabel();
  }
 
  function setDefaults () {
@@ -90,10 +91,15 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
  });
  }
 
+ function addAriaLabel () {
+ if (!parent.attr('aria-label') && !parent.text().trim()) {
+ parent.attr('aria-label', element.text().trim());
+ }
+ }
+
  function manipulateElement () {
  element.detach();
  element.attr('role', 'tooltip');
- element.attr('id', attr.id || ('tooltip_' + $mdUtil.nextUid()));
  }
 
  function getParentWithPointerEvents () {
@@ -149,16 +155,13 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe
  return;
  }
 
- parent.attr('aria-describedby', element.attr('id'));
-
  positionTooltip();
  angular.forEach([element, background, content], function (element) {
  $animate.addClass(element, 'md-show');
  });
  }
 
  function hideTooltip() {
- parent.removeAttr('aria-describedby');
  $q.all([
  $animate.removeClass(content, 'md-show'),
  $animate.removeClass(background, 'md-show'),

src/components/tooltip/tooltip.spec.js

@@ -29,7 +29,7 @@ describe('<md-tooltip> directive', function() {
  expect(findTooltip().length).toBe(0);
  }));
 
- it('should describe parent', inject(function($compile, $rootScope, $animate) {
+ it('should preserve parent text', inject(function($compile, $rootScope, $animate) {
  var element = $compile('<md-button>' +
  'Hello' +
  '<md-tooltip md-visible="isVisible">Tooltip</md-tooltip>' +
@@ -38,13 +38,23 @@ describe('<md-tooltip> directive', function() {
  $rootScope.$apply('isVisible = true');
  $animate.triggerCallbacks();
 
- expect(element.attr('aria-describedby')).toEqual(findTooltip().attr('id'));
+ expect(element.attr('aria-label')).toBeUndefined();
+ }));
 
- $rootScope.$apply('isVisible = false');
+ it('should label parent', inject(function($compile, $rootScope, $animate) {
+ var element = $compile('<md-button>' +
+ '<md-tooltip md-visible="isVisible">Tooltip</md-tooltip>' +
+ '</md-button>')($rootScope);
+
+ $rootScope.$apply('isVisible = true');
  $animate.triggerCallbacks();
 
- expect(element.attr('aria-describedby')).toBeFalsy();
+ expect(element.attr('aria-label')).toEqual('Tooltip');
+
+ $rootScope.$apply('isVisible = false');
+ $animate.triggerCallbacks();
 
+ expect(element.attr('aria-label')).toEqual('Tooltip');
  }));
 
  it('should set visible on mouseenter and mouseleave', inject(function($compile, $rootScope, $timeout) {