fix(dialog): set aria-describedby based on content element

Sets the `aria-describedby` attribute on the dialog based on the `md-dialog-content`. This allows for screen readers to pick up and read out the dialog contents.

Author: crisbeto

src/lib/dialog/dialog-container.ts

@@ -67,6 +67,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
     'class': 'mat-dialog-container',
     '[attr.role]': '_config?.role',
     '[attr.aria-labelledby]': '_ariaLabelledBy',
+    '[attr.aria-describedby]': '_ariaDescribedBy',
     '[@slideDialog]': '_state',
     '(@slideDialog.done)': '_onAnimationDone($event)',
   },
@@ -96,6 +97,9 @@ export class MdDialogContainer extends BasePortalHost {
   /** ID of the element that should be considered as the dialog's label. */
   _ariaLabelledBy: string | null = null;
 
+  /** ID of the element that should be considered as the dialog's content. */
+  _ariaDescribedBy: string | null = null;
+
   constructor(
     private _ngZone: NgZone,
     private _elementRef: ElementRef,

src/lib/dialog/dialog-content-directives.ts

@@ -67,9 +67,22 @@ export class MdDialogTitle implements OnInit {
 @Directive({
   selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content,' +
             '[mdDialogContent], [matDialogContent]',
-  host: {'class': 'mat-dialog-content'}
+  host: {
+    'class': 'mat-dialog-content',
+    '[id]': 'id'
+  }
 })
-export class MdDialogContent { }
+export class MdDialogContent implements OnInit {
+  @Input() id = `md-dialog-content-${dialogElementUid++}`;
+
+  constructor(@Optional() private _container: MdDialogContainer) { }
+
+  ngOnInit() {
+    if (this._container && !this._container._ariaDescribedBy) {
+      Promise.resolve().then(() => this._container._ariaDescribedBy = this.id);
+    }
+  }
+}
 
 
 /**

src/lib/dialog/dialog.spec.ts

@@ -666,7 +666,7 @@ describe('MdDialog', () => {
       });
     }));
 
-    it('should set the aria-labelled by attribute to the id of the title', async(() => {
+    it('should set the aria-labelledby attribute to the id of the title', async(() => {
       let title = overlayContainerElement.querySelector('[md-dialog-title]')!;
       let container = overlayContainerElement.querySelector('md-dialog-container')!;
 
@@ -677,6 +677,17 @@ describe('MdDialog', () => {
       });
     }));
 
+    it('should set the aria-describedby attribute to the id of the content', async(() => {
+      let content = overlayContainerElement.querySelector('md-dialog-content')!;
+      let container = overlayContainerElement.querySelector('md-dialog-container')!;
+
+      viewContainerFixture.whenStable().then(() => {
+        expect(content.id).toBeTruthy('Expected content element to have an id.');
+        expect(container.getAttribute('aria-describedby'))
+            .toBe(content.id, 'Expected the aria-describedby to match the title id.');
+      });
+    }));
+
   });
 });