fix(dialog): add config option for aria-describedby (#5365)

Adds an option to the dialog config that allows for the `aria-describedby` to be set on the dialog container.

Author: crisbeto

src/lib/dialog/dialog-config.ts

@@ -63,5 +63,8 @@ export class MdDialogConfig {
   /** Layout direction for the dialog's content. */
   direction?: Direction = 'ltr';
 
+  /** ID of the element that describes the dialog.  */
+  ariaDescribedBy?: string | null = null;
+
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }

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]': '_config?.ariaDescribedBy || null',
     '[@slideDialog]': '_state',
     '(@slideDialog.done)': '_onAnimationDone($event)',
   },

src/lib/dialog/dialog.spec.ts

@@ -117,6 +117,15 @@ describe('MdDialog', () => {
     expect(dialogContainerElement.getAttribute('role')).toBe('alertdialog');
   });
 
+  it('should apply the specified `aria-describedby`', () => {
+    dialog.open(PizzaMsg, { ariaDescribedBy: 'description-element' });
+
+    viewContainerFixture.detectChanges();
+
+    let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!;
+    expect(dialogContainerElement.getAttribute('aria-describedby')).toBe('description-element');
+  });
+
   it('should close a dialog and get back a result', async(() => {
     let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
     let afterCloseCallback = jasmine.createSpy('afterClose callback');
@@ -666,7 +675,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')!;