fix(badge): put matBadgeDescription on host instead of badge element

Fixes a screenreader issue on the mat-badge component where
screenreaders did not read the `matBadgeDescription` for badges hosted
on `button` elements.

Example:
```<button mat-badge="2" matBadgeDescription="2 unread messages">open
messages</button>```

As tested on Chromevox with Chrome browser, screenreader reads "open
messages" and does *not* read "2 unread messages". Screenreader does not
allow navigation to the badge element.

This happens because `button`'s are not supposed to have multiple lines.

Solution is to align with tooltip by making the badge element
aria-hidden and applying the `matBadgeDescription` to the host element.

Author: zarend

src/dev-app/badge/badge-demo.html

@@ -67,6 +67,10 @@ <h3>Buttons</h3>
     <button mat-raised-button>
       <mat-icon matBadge="22" color="accent">home</mat-icon>
     </button>
+
+    <button mat-button matBadge="11" matBadgeDescription="I've got 11 problems.">
+	    Aria
+    </button>
   </div>
 
   <div class="demo-badge">

src/dev-app/badge/badge-demo.scss

@@ -2,7 +2,7 @@
   margin-bottom: 25px;
 }
 
-.mat-badge {
+.mat-badge, .mat-button {
   margin-right: 22px;
 
   [dir='rtl'] & {

src/material/badge/badge.ts

@@ -94,11 +94,6 @@ export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, Can
       const badgeElement = this._badgeElement;
       this._updateHostAriaDescription(newDescription, this._description);
       this._description = newDescription;
-
-      if (badgeElement) {
-        newDescription ? badgeElement.setAttribute('aria-label', newDescription) :
-            badgeElement.removeAttribute('aria-label');
-      }
     }
   }
   private _description: string;
@@ -160,7 +155,7 @@ export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, Can
 
     if (badgeElement) {
       if (this.description) {
-        this._ariaDescriber.removeDescription(badgeElement, this.description);
+        this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);
       }
 
       // When creating a badge through the Renderer, Angular will keep it in an index.
@@ -197,6 +192,8 @@ export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, Can
 
     // Clear any existing badges which may have persisted from a server-side render.
     this._clearExistingBadges(contentClass);
+    // Hide badge element from screen readers.
+    badgeElement.setAttribute('aria-hidden', 'true');
     badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
     badgeElement.classList.add(contentClass);
     badgeElement.textContent = this._stringifyContent();
@@ -205,10 +202,6 @@ export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, Can
       badgeElement.classList.add('_mat-animation-noopable');
     }
 
-    if (this.description) {
-      badgeElement.setAttribute('aria-label', this.description);
-    }
-
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
@@ -225,17 +218,17 @@ export class MatBadge extends _MatBadgeBase implements OnDestroy, OnChanges, Can
     return badgeElement;
   }
 
-  /** Sets the aria-label property on the element */
+  /** Sets the aria-describedby property on the host element */
   private _updateHostAriaDescription(newDescription: string, oldDescription: string): void {
     // ensure content available before setting label
-    const content = this._updateTextContent();
+    this._updateTextContent();
 
     if (oldDescription) {
-      this._ariaDescriber.removeDescription(content, oldDescription);
+      this._ariaDescriber.removeDescription(this._elementRef.nativeElement, oldDescription);
     }
 
     if (newDescription) {
-      this._ariaDescriber.describe(content, newDescription);
+      this._ariaDescriber.describe(this._elementRef.nativeElement, newDescription);
     }
   }