fix(list): empty aria-label attributes for list-items with interpolation (#10218)

* fix(list): empty aria-label attributes for list-items with interpolation

* The `md-list-item` component determines the aria-label from the content if no `aria-label` is specified.
  Right now the `md-list-item` is not able to determine the label from interpolated content and shows a lot of $mdAria warnings

* Fixes that the `md-list-item` complains twice about a missing `aria-label`, because the label was expected on the list and on the underlaying button element.

* Fixes a potential issue in the `$mdAriaProvider` where the provider class instance is applied to the service.

* Remove $q injection

Author: devversion

src/components/list/list.js

@@ -330,11 +330,14 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
             '<md-button class="md-no-style"></md-button>'
           );
 
-          // Expect the root element to have a label set. If not set, determine the label from the text content.
-          $mdAria.expectWithText(tEl, 'aria-label');
-
           copyAttributes(tEl[0], buttonWrap[0]);
 
+          // If there is no aria-label set on the button (previously copied over if present)
+          // we determine the label from the content and copy it to the button.
+          if (!buttonWrap.attr('aria-label')) {
+            buttonWrap.attr('aria-label', $mdAria.getText(tEl));
+          }
+
           // We allow developers to specify the `md-no-focus` class, to disable the focus style
           // on the button executor. Once more classes should be forwarded, we should probably make the
           // class forward more generic.

src/components/list/list.spec.js

@@ -532,15 +532,30 @@ describe('mdListItem directive', function() {
       expect(buttonEl.attr('aria-label')).toBe('Content');
     });
 
+    it('should determine the label from the bound content if aria-label is not set', function() {
+      var listItem = setup(
+        '<md-list-item ng-click="null">' +
+        '<span>{{ content }}</span>' +
+        '<span aria-hidden="true">Hidden</span>' +
+        '</md-list-item>'
+      );
+
+      $rootScope.$apply('content = "Content"');
+
+      var buttonEl = listItem.find('button');
+
+      // The aria-label attribute should be determined from the content.
+      expect(buttonEl.attr('aria-label')).toBe('Content');
+    });
+
     it('should warn when label is missing and content is empty', inject(function($log) {
       // Clear the log stack to assert that a new warning has been added.
       $log.reset();
 
       setup('<md-list-item ng-click="null">');
 
-      // Expect $log to have two warnings. A warning for the md-list-item and a second one for the later compiled
-      // button executor.
-      expect($log.warn.logs.length).toBe(2);
+      // Expect $log to have one $mdAria warning, because the button misses an aria-label.
+      expect($log.warn.logs.length).toBe(1);
     }));
 
   });

src/core/services/aria/aria.js

@@ -30,18 +30,15 @@ angular
  */
 function MdAriaProvider() {
 
-  var self = this;
-
-  /**
-   * Whether we should show ARIA warnings in the console, if labels are missing on the element
-   * By default the warnings are enabled
-   */
-  self.showWarnings = true;
+  var config = {
+    /** Whether we should show ARIA warnings in the console if labels are missing on the element */
+    showWarnings: true
+  };
 
   return {
     disableWarnings: disableWarnings,
     $get: function($$rAF, $log, $window, $interpolate) {
-      return MdAriaService.apply(self, arguments);
+      return MdAriaService.apply(config, arguments);
     }
   };
 
@@ -51,7 +48,7 @@ function MdAriaProvider() {
    * @description Disables all ARIA warnings generated by Angular Material.
    */
   function disableWarnings() {
-    self.showWarnings = false;
+    config.showWarnings = false;
   }
 }
 
@@ -68,7 +65,8 @@ function MdAriaService($$rAF, $log, $window, $interpolate) {
     expect: expect,
     expectAsync: expectAsync,
     expectWithText: expectWithText,
-    expectWithoutText: expectWithoutText
+    expectWithoutText: expectWithoutText,
+    getText: getText
   };
 
   /**
@@ -110,7 +108,7 @@ function MdAriaService($$rAF, $log, $window, $interpolate) {
     var content = getText(element) || "";
     var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
 
-    if ( hasBinding ) {
+    if (hasBinding) {
       expectAsync(element, attrName, function() {
         return getText(element);
       });